动态设置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就检测一次，会不会有性能问题。就我自己使用的感觉来说，根本感觉不到有任何性能问题。