最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下;

 1  <!-- 页面主体内容 -->
 2     <div class="iframe-wrapper" >
 3         <iframe scrolling="no" id="iframe1" name="iframe1"
 4                 src="../index/index_copy.html" frameborder="0" width="100%" height="1000"></iframe>
 5     </div>
 6  <!-- 下面的代码也可以在iframe标签内写成 onload="this.height=this.contentWindow.document.body.scrollHeight" -->
 7 <script>
 8     $('#iframe1').load(function (){
 9         this.height=this.contentWindow.document.body.scrollHeight;
10     })
11 </script>

以上写完之后,iframe的高度就可以随着内嵌的子页面变化而变化,但是问题也出现了,子页面body的高度并不完全等于iframe的高度,

这样就会导致显示的页面很丑,有的也会显示不全;网上试了很多办法都没成功,最后找到一种方法,该方法的原理就是监听元素的变化,

一旦元素一变化就把子页面的高度设置到iframe的高度中,废话不说了,上代码;

<!-- 将以下代码放到页面调用的公共js中/也可以单独在需要的页面引入 -->
function bodyResize(){
    parent.window.document.getElementById('iframe1').height=(document.body.scrollHeight);
}

/**
 * 动态调整iframe高度的公共方法
 */
var EleResize = {
    _handleResize: function (e) {
        var ele = e.target || e.srcElement;
        var trigger = ele.__resizeTrigger__;
        if (trigger) {
            var handlers = trigger.__z_resizeListeners;
            if (handlers) {
                var size = handlers.length;
                for (var i = 0; i < size; i++) {
                    var h = handlers[i];
                    var handler = h.handler;
                    var context = h.context;
                    handler.apply(context, [e]);
                }
            }
        }
    },
    _removeHandler: function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners;
        if (handlers) {
            var size = handlers.length;
            for (var i = 0; i < size; i++) {
                var h = handlers[i];
                if (h.handler === handler && h.context === context) {
                    handlers.splice(i, 1);
                    return;
                }
            }
        }
    },
    _createResizeTrigger: function (ele) {
        var obj = document.createElement('object');
        obj.setAttribute('style',
            'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');
        obj.onload = EleResize._handleObjectLoad;
        obj.type = 'text/html';
        ele.appendChild(obj);
        obj.data = 'about:blank';
        return obj;
    },
    _handleObjectLoad: function (evt) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize);
    }
};
if (document.attachEvent) {//ie9-10
    EleResize.on = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners;
        if (!handlers) {
            handlers = [];
            ele.__z_resizeListeners = handlers;
            ele.__resizeTrigger__ = ele;
            ele.attachEvent('onresize', EleResize._handleResize);
        }
        handlers.push({
            handler: handler,
            context: context
        });
    };
    EleResize.off = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners;
        if (handlers) {
            EleResize._removeHandler(ele, handler, context);
            if (handlers.length === 0) {
                ele.detachEvent('onresize', EleResize._handleResize);
                delete  ele.__z_resizeListeners;
            }
        }
    }
} else {
    EleResize.on = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners;
        if (!handlers) {
            handlers = [];
            ele.__z_resizeListeners = handlers;

            if (getComputedStyle(ele, null).position === 'static') {
                ele.style.position = 'relative';
            }
            var obj = EleResize._createResizeTrigger(ele);
            ele.__resizeTrigger__ = obj;
            obj.__resizeElement__ = ele;
        }
        handlers.push({
            handler: handler,
            context: context
        });
    };
    EleResize.off = function (ele, handler, context) {
        var handlers = ele.__z_resizeListeners;
        if (handlers) {
            EleResize._removeHandler(ele, handler, context);
            if (handlers.length === 0) {
                var trigger = ele.__resizeTrigger__;
                if (trigger) {
                    trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize);
                    ele.removeChild(trigger);
                    delete ele.__resizeTrigger__;
                }
                delete  ele.__z_resizeListeners;
            }
        }
    }
}

最后子页面的js的初始化的前面调用

 1 //动态调整iframe高度
 2 EleResize.on(document.body,function(){bodyResize();});
 3 
 4 //页面初始化代码
 5 $(function () {
 6     //获取列表数据
 7     getData(nowPage);
 8     // $("body").live("resize",bodyResize());
 9     //$("body").resize(bodyResize());
10     // $("body").resize(alert(123455));
11 });

这样iframe页面就可以自动随着子页面的标签变化而动态变化了

 

版权声明:本文为jx1997原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/jx1997/p/14175120.html