Iframe 自适应高度 无限级父框架 多层框架自适应

[b]问题描述[/b]
今天在处理一个Iframe自适应高度时遇到一个多层Iframe引用时的高度不能撑开的问题,效果同Demo1.


[b]原因分析[/b]
问题是由引用的顺序引起的,我们假设有3层Iframe引用,h1.html,h2.html,h3.html h1包含h2,h2又包含h3,h3.html中有内容会出现高度适应问题,一般的处理方式是我们在引用h3的iframe中加入onload事件来让这个Iframe高度自适应引用的页面高度。这时我们打开h1.html就开发页面看起还是没有撑开,这是因为页面是一级一级的加载下去的,当h1引用h2时,h2的高度是固定的,当h3加载完毕的时候h2的高度做了变化,但是这时h1的引用页面高度并没有改变就造成了页面看起来还是没有撑开,经和同事讨论后编写了一个JS的自动重新计算parent(父页面)中Iframe元素的高度,从而解决这个问题,原理主要是通过一直循环获取页面parent的Iframe元素,当获取到top层时就结束


[b]代码[/b]
单个Iframe适应
onload="this.style.height=iframe1.document.body.scrollHeight"


[color=red]注:iframe1为该框架的ID,我在尝试不硬写名字的自适应方法,如果成功就换上来。 :D [/color]


自适应多级Iframe高度
//进行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;
doc = p.document;
break;
}
}
if(p == top){
break;
}
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值