如果需要对画面中的部分区域作局部刷新,大家可能都会想到使用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就检测一次,会不会有性能问题。就我自己使用的感觉来说,根本感觉不到有任何性能问题。