iframe 多层嵌套 无限嵌套 高度自适应的解决方案
导读：收集整理的这篇文章主要介绍了iframe 多层嵌套 无限嵌套 高度自适应的解决方案，觉得挺不错的，现在分享给大家，也给大家做个参考。 有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页...
收集整理的这篇文章主要介绍了iframe 多层嵌套 无限嵌套 高度自适应的解决方案，觉得挺不错的，现在分享给大家，也给大家做个参考。 有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应 A页面
复制代码代码如下:
body>
iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="B页面"
onload="this.height=main.document.body.scrollHeight; this.width=main.document.body.scrollWidth; if(this.height 410){ this.height=410; } ">
/iframe>
/body>
B页面
复制代码代码如下:
body>
!--左边-->
div style="flost:left; ">
左边菜单
/div>
!--右边-->
div style="flost:right; ">
iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px; " scrolling="no" src="C页面"> /iframe>
/div>
/body>
C页面
将下面这个JS函数写到 最最底层的页面中(即最孙子的那个页面) 并在body的onload事件中调用该方法 【下面这个公式是万能公式】
复制代码代码如下:
script tyPE="text/javascript">
//进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
function autoHeight(){
VAR doc = document,
p = window;
while(p = p.parent){
var frames = p.frames,
frame,
i = 0;
while(frame = frames[i++]){
if(frame.document == doc){
frame.frameElement.style.height = doc.body.scrollHeight + 'px'; // 这里一定要注意 火狐必须要加'px‘ 否则火狐无效
doc = p.document;
break;
}
}
if(p == top){
break;
}
}
}
/script>
body onload="autoHeight(); ">
!--经测试 这个最最最子的页面的body中必须要有一个有高度的div才行 否则上面的自适应生效-->
div style="height: 1px; ">
/div>
div style="padding-bottom: 10px; "> !--这句话也是必不可少的-->
这里可以写真正的内容 并且给该div的padding-bottom设一个值
/div>
/body>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： iframe 多层嵌套 无限嵌套 高度自适应的解决方案
本文地址： https://pptw.com/jishu/587904.html