检测嵌入页面是否已从 iframe 内部完全加载

Question

我想在嵌入页面完全加载时从 iframe 发送一条帖子消息。如何从 iframe 内部检测是否是这种情况？

我已经尝试使用"DOMContentLoaded"的eventListener

document.addEventListener("DOMContentLoaded", postMessageFunctionCall);

但它不会对来自父级的事件做出反应。是否有可能从 iframe 内部对此事件做出反应？

Answer 1

如果页面和 iframe 来自同一来源，您可以通过 parent 挂钩事件：

parent.document.addEventListener("DOMContentLoaded", postMessageFunctionCall);

不过，这在跨源中不起作用。

因为这会设置争用条件，所以您可以先检查文档的readyState：

if (parent.document.readyState !== "loading") {
    postMessageFunctionCall();
} else {
    parent.document.addEventListener("DOMContentLoaded", postMessageFunctionCall);
}