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

问题描述

我有一个iframe，只要内容自动刷新(每隔几分钟)或当用户与其互动时，我都希望调整其大小以匹配其内容.尽管内容在同一个域中，但我很难修改内容.理想情况下，iframe可以自行调整其内容的大小.

I have an iframe that I would like to resize to match its contents whenever the contents auto refreshes (every few minutes) or when the user interacts with it. Although the contents are in the same domain, it would be difficult for me to modify the contents. Ideally, the iframe would just self adjust to the size of its contents.

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

Current code that resizes only once:

<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以适合其中的内容

推荐答案

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

What you need to do is to set a timer and check the iFrame size after a few moments. You may have to check several times as not all browsers return the correct size immediately.

此方法仅适用于相同域的iFrame.

This method works only on same-domain iFrames.

将函数绑定到iFrame onload事件，并在执行时检查iFrame的高度.如果没有找到高度，请稍后再进行检查.

Bind a function to the iFrame onload event and when it executes check the height of the iFrame. If no height is found schedule another check in a few moments.

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事件(无论如何):

Then bind the event to the onload event of your iFrame (however you want to):

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

The "scrolling=auto" is useful, just in case the sizing fails at least they have scrollbars. The onload event fires if the iFrame reloads, so is useful if they've clicked a link inside it.

这篇关于在内容刷新或更新时调整iframe的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！