动态设置iframe高度(iframe高度自适应)

如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。

但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。

对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构：

<div id="content">
<div id="frame">
<iframe id="mainFrame" name="mainFrame" scrolling="no" src="xxx"></iframe>
</div>
</div>

如果不作特别处理，那么 frame 这个div的高度将是固定的(chrome下好像是150px)。

显然，这肯定是有问题的。

那么，要怎么让外部的页面的高度，随着iframe的高度变化而变化呢？

网上搜索了之后，我的作法如下：

// calculate the height of the main frame dynamically
(function() {
var cacheHeight = 0;
function run() {
var mf = $("#mainFrame")[0];
// when the main frame has already been loaded, the check its height
if (mf && mf.contentDocument && mf.contentDocument.body) {
var iframeHeight = $("#mainFrame")[0].contentDocument.body.clientHeight;
if (iframeHeight && iframeHeight != cacheHeight) {
// cache the main frame height
cacheHeight = iframeHeight;
$("#mainFrame").height(iframeHeight);
}
}
setTimeout(run, 200);
}
run();
})();

大概思路是：

每隔一定时间(上面是200ms)去检测iframe内部页面的高度，如果它的高度发生了变化，那么则改变外部页面的高度。

也许有人觉得 200ms就检测一次，会不会有性能问题。就我自己使用的感觉来说，根本感觉不到有任何性能问题。