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

Posted 2020-10-13 听雨的人

这些代码要写在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>