0

我有一个 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>

相关问题：调整 iframe 的宽度高度以适应其中的内容

4

2 回答 2

0

您需要做的是设置一个计时器并在片刻后检查 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 事件，因此如果他们单击了其中的链接，则该事件很有用。

于 2012-08-22T23:59:08.377 回答
0

我对这个 jQuery 插件很幸运 - https://github.com/davidjbradshaw/iframe-resizer

于 2015-08-19T19:32:39.977 回答