iframe自动适应高度

来源：互联网发布：飞天特效软件下载编辑：程序博客网时间：2024/05/21 12:08

iframe 自动适应高度

最近在做一个web后台管理的项目，本来打算采用传统的frameset和frame来完成frame的建设。但是发现html5中已经不再推荐使用这两个tag了。同时，为了更加的轻量级，没有采用像extjs这类的js框架。所以只能使用iframe了。

我的web页面里面呢包含有四个部分的iframe：header；menu；content；footer。其中header，menu，footer都是纯静态的页面。content是动态的，页面加载的时候会有一些后台ajax的请求然后创建页面内容。

看了网上的一些前辈的介绍，如何让iframe自动适应子窗口的高度。基本上也有一些效果的。具体说来就是针对纯静态页面的解决效果很好。但是遇到动态的页面就显得有点问题了。

我的方案：先看看代码吧：

<body>    <div id="header">        <iframe src="header.html"></iframe>    </div>    <div id="main">        <div id="nav">            <iframe src="nav.html"></iframe>        </div>        <div id="content">            <iframe src="home.html" name="contentFrame" id="contentFrame"></iframe>        </div>    </div>    <div id="footer">        <iframe src="footer.html"></iframe>    </div><script type="text/javascript">    function setHeight() {        var sets = document.getElementsByTagName('iframe');        for (i = 0; i < sets.length; i++) {            sets[i].onload = function() {                this.height = this.contentDocument.body.scrollHeight;            };        }    }        setHeight();</script></body>

关键就在于js的位置了。网上有一种解决办法，是把js放在head里面。然后给body加上事件:

<body onload="setHeight()">

因为我的content里面有ajax的代码：

$(document).ready(function(    $.ajax(...);));

ajax的返回处理代码是给body里面添加新的table数据。这样的话，body的scrollHeight属性就变了。

当我采用在body里面添加事件来解决的时候，发现并不是很好解决。

但是当我把js放到了body的最尾部的时候。惊奇的发现问题被解决了。

总结：经过多次的尝试，总算是找到了一个我认为合适的解决办法。

问题：第一次加载页面的时候还是挺管用的。但是当页面中再次发生ajax请求需求刷新局部数据的时候，这个时候的高度又不能动了。现在还在努力探讨中，如果有哪位高手知道的话，还望指点一二。

0 0