javascript - 检查 iframe 内容是否已加载？

Question

当 iframe 的内容加载时，我需要触发 JavaScript 函数。我看到很多(过时的？)使用 iframe onload 事件的答案，该事件似乎根本没有触发(在 Chrome 中)。

根本不触发(至少在 Chrome 中):

<iframe id="target-iframe" src="SRC_URL" onload="iframeLoaded()"></iframe>

为内容准备好之前触发的 iframe 的 readState 设置监听器:

function listenForIframe() {
    const iframe = document.getElementById("target-iframe");
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (iframeDoc.readyState == 'complete') {
        iframe.contentWindow.onload = function(){
            // console.log('loaded')
        };
        iframeLoaded();
        return;
    }
    window.setTimeout(listenForIframe, 100);
}

我当前的用例是使用 iframe-resizer 并收到以下错误消息，因为 iframe 内容尚不存在。只是想在这里保持一个干净的控制台!

iframeResizer.js:791 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('null').

它最终会加载，但如果可能的话，希望消除该错误。

Answer 1

要在加载 iFrame 时收到通知，您今天仍然可以使用 onload 事件。

创建 iFrame 并设置 JavaScript 的 ID:

<iframe id="test" src="SRC_URL"></iframe>

现在使用 JavaScript 访问 iFrame 并为加载事件设置一个 EventListener:

const iframe = document.getElementById("test");
iframe.addEventListener("load", function() {
    console.log("Finish");
});

iFrame 加载完成后，控制台中会记录“完成”。我已经用 Google Chrome 对其进行了测试，效果很好。

然后您可以在事件处理程序中执行操作。例如发送消息:

iframe.contentWindow.postMessage({ title: "Hi", message: "Seems to work" }, targetOrigin);

另请确保您有权嵌入网页(X 框架选项)。