iframe多层嵌套无限嵌套高度自适应的解决方案
来源: 阅读:830 次 日期:2016-06-20 09:22:19
温馨提示: 小编为您整理了“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>

更多信息请查看网页制作
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map