zoukankan      html  css  js  c++  java
  • H5特性 MutationObserver 监听元素 动态改变iframe高度

    这些代码要写在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>
  • 相关阅读:
    首页列表显示全部问答,完成问答详情页布局。
    制作首页的显示列表。
    管理信息系统 课程设计
    期末作品检查
    数据迁移
    模型分离(选做)
    密码保护
    实现搜索功能
    完成个人中心—导航标签
    个人中心标签页导航
  • 原文地址:https://www.cnblogs.com/GoCircle/p/7777533.html
Copyright © 2011-2022 走看看