码迷,mamicode.com
首页 > 其他好文 > 详细

H5特性 MutationObserver 监听元素 动态改变iframe高度

时间:2017-11-03 13:03:37      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:type   ret   ext   disco   asc   text   停止   set   his   

这些代码要写在iframe页中执行

    <script type="text/javascript">
        $(function () {
            // Firefox和Chrome早期版本中带有前缀
            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
            // 选择目标节点
            var target = document.body;
            // 创建观察者对象
            var observer = new MutationObserver(function (mutations) {
                setIframeByElement(getIframeByElement(document.body))
            });
            // 配置观察选项:
            var config = { attributes: true, subtree: true }
            // 传入目标节点和观察选项
            observer.observe(target, config);
            // 随后,你还可以停止观察
            //observer.disconnect();

        });
        function setIframeByElement(iFrame) {
            $(iFrame).attr(height, $(iFrame).contents().find("body").height() +  !important);
        }

        function getIframeByElement(element) {
            var iframe;
            $("iframe", window.parent.document).each(function () {
                if (element.ownerDocument === this.contentWindow.document) {
                    iframe = this;
                }
                return !iframe;
            });
            return iframe;
        }
    </script>

 

H5特性 MutationObserver 监听元素 动态改变iframe高度

标签:type   ret   ext   disco   asc   text   停止   set   his   

原文地址:http://www.cnblogs.com/GoCircle/p/7777533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!