装载iframe 子页面,自适应高度


假设主页面有一个div,里面放置一个iframe
<div id="frameBox">
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0"  scrolling="no"></iframe>
</div>
3个菜单链接,分别在iframe加载 1.html、2.html、3.html 三个页面。

3个子页面分别在自己页面加载完window.onload执行
function aa(){  
       var newHeight = document.body.scrollHeight + 20 + "px";       
       window.parent.document.getElementById("frameBox").style.height = newHeight;
       //以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改
       window.parent.document.getElementById("frameWin").style.height = newHeight;

}

 

觉得原来的方法不是很好


  • 每一个嵌进来的页面都要去修改
  • 占用了每一个嵌进来的页面的onload

所以修改了一下,把函数放在了主页面,ie6、firefox2 通过,希望ie7的网友帮忙测试
页面代码:
<div style="border:1px solid #7e99c6" id="frameBox">
       <iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe>
</div>

js脚本(加在主页面):
function test2(){
       var frameWin = document.getElementById("frameWin");
       var frameBox = document.getElementById("frameBox");
       var newHeight;
       if (frameWin.Document){
              newHeight = frameWin.Document.body.scrollHeight + 20 + "px";
       }else{
              newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
       }
       frameWin.style.height = newHeight;
       frameBox.style.height = newHeight;

posted @ 2010-05-09 21:05  愁容骑士FFF  阅读(416)  评论(0编辑  收藏  举报