Question

我有一个iframe，每当内容自动刷新（每隔几分钟）或用户与之交互时，我想调整大小以匹配其内容。虽然内容在同一个域中，但我很难修改内容。理想情况下，iframe只会自行调整其内容的大小。

仅调整一次大小的当前代码：

<iframe id="ganglia-frame" src="ganglia.url" width="100%" height="500%">
    blah not supported blah
</iframe>

<script language="Javascript">
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow ||
                    iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height =
                        iframeWin.document.documentElement.scrollHeight ||
                        iframeWin.document.body.scrollHeight;
            }
        }
    }

    $(window).load(function () {
        setIframeHeight(document.getElementById('ganglia-frame'));
    });
</script>

相关问题：Adjust width height of iframe to fit with content in it

Answer 1

您需要做的是设置一个计时器并在片刻后检查iFrame大小。您可能需要多次检查，因为并非所有浏览器都会立即返回正确的大小。

此方法仅适用于同域iFrame。

将函数绑定到iFrame onload事件，并在执行时检查iFrame的高度。如果没有找到高度，请在几分钟后安排另一次检查。

var iFrameSizeCount = 0;
var onloadFunction = function(event){
    var contentHeight = document.getElementById('iFrameId').contentWindow.document.body.offsetHeight;

    if(contentHeight == 0){
         // Schedule a recheck in a few moments
         iFrameSizeCount++; // we keep a count of how many times we loop just in case
         if(iFrameSizeCount  < 10){ // after a while we have to stop checking and call it a fail
             setTimeout(function(){ onloadFunction(event); }, 200);
             return false;
         }
         else {
              contentHeight  = 100; // eventually if the check fails, default to a fixed height. You could possibly turn scrolling to auto/yes here to give the iFrame scrollbars.
         }
     }
    contentHeight += 30; // add some extra padding (some browsers give a height that's slightly too short)

    document.getElementById('iFrameId').style.height = contentHeight + 'px';
}

然后将事件绑定到iFrame的onload事件（无论你想要）：

“scrolling = auto”很有用，以防大小调整失败，至少它们有滚动条。如果iFrame重新加载，则会触发onload事件，因此如果他们点击了其中的链接，则会很有用。

Answer 2

我对这个jQuery插件运气不错 - https://github.com/davidjbradshaw/iframe-resizer

在内容刷新或更新时调整iframe的大小

2 个答案: