多层嵌套iframe 自适应高度的解决方法

 

我在页面main.htm中包含框架<iframe id="main" name="main" src='t1.htm'></iframe>
 其中,通过main.htm导航条,动态调整main iframe的内容。实现功能导航。
  t1.htm中也包含框架<iframe id="t1" name="t1" src="t2.htm"></iframe>
 其中,t1.htm主要为某个功能的操作按钮,通过某些操作生成结果在t1 iframe中
 显示。
  t2.htm中是高度很大的页面,不含其他的框架。

我想要在t1 iframe文挡内容发生变化的时候。能够动态改变t1.htm页面的高度。
同时也要刷新main.htm的main iframe的高度,使得所有的高度进行匹配。


网络上提供的解决方法,都是针对某个iframe 调整的,并不能满足我的需求。
自己摸索了一段时间,才得到解决,虽然解决方法任便不够优美,但可以拿出来。
大家一快学习。其实,原理都不难,难的是Javascript标准的支持不一致,而且调试
很不方便造成的。期间有一本书<<Javascript bible>>(<javascript圣经>),其中的
某些章节对我帮助很大,希望你也可以得到很多收获。

我的解决方法:
在t2.htm中(最好在<head></head>标签内)加入:
<script type="text/javascript">
 function window.onload(){
  //parent.document.getElementById("t1").height=document.body.scrollHeight;
  //没有style也可以
 parent.document.getElementById("t1").style.height=document.body.scrollHeight;
 parent.document.getElementById("t1").style.width=document.body.scrollWidth;
 
 parent.parent.document.getElementById("main").style.height=parent.document.body.scrollHeight;
 parent.parent.document.getElementById("main").style.width=parent.document.body.scrollWidth;
}

在t1.htm中(最好在<head></head>标签内)加入:
<script type="text/javascript">
 function window.onload(){
 
  //parent.document.getElementById("main").height=document.body.scrollHeight;
  //没有style也可以
 parent.document.getElementById("main").style.height=document.body.scrollHeight;
 parent.document.getElementById("main").style.width=document.body.scrollWidth;
}
</script>

这样在t2.htm被载入的时候,动态调整t1 iframe及 main iframe的高度。
 在t1.htm被载入的时候,动态调整main iframe的高度。
从而实现了上述得到功能。(在IE6.0中测试)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值