Question

我使用此代码自动调整我的iframe http://sonspring.com/journal/jquery-iframe-sizing。工作得很好，但昨天当我使用搜索引擎作为iframe时出现了一个问题，因为结果需要0.5到1秒才能显示，自动调整大小无法正确调整窗口大小所以我认为我需要延迟脚本0.5秒。我怎样才能做到这一点？

这是来自iframe.js的代码

$(document).ready(function()
{
    // Set specific variable to represent all iframe tags.
    var iFrames = document.getElementsByTagName('iframe');

    // Resize heights.
    function iResize()
    {
        // Iterate through all iframes in the page.
        for (var i = 0, j = iFrames.length; i < j; i++)
        {
            // Set inline style to equal the body height of the iframed content.
            iFrames[i].style.height = iFrames   [i].contentWindow.document.body.offsetHeight + 'px';
        }
    }

    // Check if browser is Safari or Opera.
    if ($.browser.safari || $.browser.opera)
    {
        // Start timer when loaded.
        $('iframe').load(function()
            {
                setTimeout(iResize, 0);
            }
        );

        // Safari and Opera need a kick-start.
        for (var i = 0, j = iFrames.length; i < j; i++)
        {
            var iSource = iFrames[i].src;
            iFrames[i].src = '';
            iFrames[i].src = iSource;
        }
    }
    else
    {
        // For other good browsers.
        $('iframe').load(function()
            {
                // Set inline style to equal the body height of the iframed content.
                this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
            }
        );
    }
}
);

Answer 1

很难在没有看到你的HTML的情况下完全回答。您可以调整setTimout(iResize, 500);，这将在0.5秒后检查。

或者，这是我在调整单个iframe时使用的内容。

它将继续检查每50ms以查看是否已加载了body元素。

function resizeIframe(iframe){
    var doc = iframe.contentDocument ||  iframe.contentWindow.document;
    if(doc.body){
        iframe.height =0;
        iframe.height = doc.body.scrollHeight + 30;
    }
    else{
         if(delay)clearTimeout(delay)
          delay = setTimeout(function(){resize(iframe)},50);
    }
};

var delay, iframe = document.getElementById('iFrame'); 


resizeIframe(iframe);

Answer 2

您需要使用mutationObserver来检测页面中的更改并触发iFrame的大小调整。

在GitHub上查看此项目，将为您执行此操作。

https://github.com/davidjbradshaw/iframe-resizer

iframe延迟调整大小

2 个答案: