Question

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

我们已尝试使用$（＆＃39; frame＆＃39;）。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 );

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

Answer 1

<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
});

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

1 个答案: