iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)
最近使用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页面就可以自动随着子页面的标签变化而动态变化了