在文档加载后调整src iframe的大小?

时间:2014-10-25 09:29:39

标签: javascript jquery html iframe

我们将phpBB嵌入到我们的网站中,并且为了使嵌入能够很好地工作,我们调整了加载phpBB的iFrame的高度。下面的代码运行良好但不完美。当帧的内容被重新加载时(通过点击其中),它等待.load()而不是.ready()来启动显示短暂延迟的调整大小事件。当您向下滚动示例中的页面并单击以移动到另一个页面(例如,选择另一个论坛)时,您会注意到它。

我们已尝试使用$(' frame')。ready()但它根本不起作用。

有什么好主意可以解决这个问题吗? 请不要建议我们复制iFrame的内容或任何此类内容。感谢。

function resize_iframes() {
    if ($('iframe').length < 1) return;

    // 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);
        });
    } else {
        // For other good browsers.
        $('iframe').load(function() {
            // Set inline style to equal the body height of the iframed content.
            try {
                this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
            } catch(err) {
            }
        });
    }
}

更新请注意,可以通过更改自身内部的代码来更快地调整大小,添加以下内容:

    window.setTimeout( function(){
        // Resize the frame we're in before it's fully loaded (images...)
        var iFrames = parent.document.getElementsByTagName('iframe');
        iFrames[0].style.height = iFrames[0].contentWindow.document.body.offsetHeight + 'px';
    }, 10 );

脚本本身的某个地方。虽然它确实解决了我们的问题,但它并没有回答所提出的问题,因此如果找到解决方案并且应该与公众共享,它将保持打开状态。谢谢:))

1 个答案:

答案 0 :(得分:0)

<iframe>没有与jQuery.ready()类似的事件。所以要做到这一点,你必须自己触发一个事件。在所有子页面中包含此脚本:

var $ = window.parent.jQuery;
$(document).ready( function(){
    var iframe = window.frameElement;
    $(iframe).trigger("ready"); 
}); 

然后在带有iframe的页面上,您可以像这样收听就绪事件:

$("iframe").on("ready", function(){
    //iframe is ready
});