如何在iframe加载完成后正确触发contentWindow.postMessage？规避setTimeout

一、先修正代码里的明显错误 #

你的代码中这一行存在严重问题：

document.addEventListener('DOMContentLoaded', postFrameMessage() )

这里你直接调用了postFrameMessage()，导致函数在绑定事件时就立即执行，根本没等到DOMContentLoaded触发。正确写法是传递函数引用，不要加括号：

document.addEventListener('DOMContentLoaded', postFrameMessage)

二、有效解决方案 #

方案1：兼容iframe已加载/未加载两种情况 #

无论脚本执行时机如何，先判断iframe是否已经加载完成，再决定直接调用还是绑定load事件：

const iframe = document.getElementById('iframe');

const postFrameMessage = () => {
  const params = {test: 'duh', ping: 'pong'}
  iframe.contentWindow.postMessage({parentParams: params }, "*")
}

// 检查iframe是否已加载完成
if (iframe.readyState === 'complete' || iframe.readyState === 'interactive') {
  postFrameMessage();
} else {
  // 绑定load事件，等待加载完成触发
  iframe.addEventListener('load', postFrameMessage);
}

方案2：确保脚本在iframe元素之后执行 #

把脚本放在iframe标签的下方（比如页面底部），此时iframe已经被DOM解析，可以直接绑定事件，同时处理已加载的情况：

<iframe id="iframe" src="your-iframe-url"></iframe>

<script>
const iframe = document.getElementById('iframe');

const postFrameMessage = () => {
  const params = {test: 'duh', ping: 'pong'}
  iframe.contentWindow.postMessage({parentParams: params }, "*")
}

if (iframe.readyState === 'complete') {
  postFrameMessage();
} else {
  iframe.addEventListener('load', postFrameMessage);
}
</script>

三、为什么原有事件绑定无效？ #

• DOMContentLoaded绑定错误：如上文所说，你直接调用了函数而非传递引用，导致函数提前执行，此时iframe还未加载，发送消息自然失败。
• 事件绑定时机太晚：如果你的脚本在iframe已经加载完成后才执行（比如脚本放页面头部，而iframe加载速度极快），此时再绑定load事件，事件已经触发过，不会再响应。
• window.onload的局限性：window.onload会等待页面所有资源（图片、样式表等）加载完毕，但如果iframe比其他资源先加载完，等window.onload触发时，iframe的load事件早就结束了，你的回调没机会执行。
• iframe.onload被覆盖：如果页面其他代码给iframe.onload赋值，会直接覆盖你的绑定，导致回调失效。用addEventListener可以避免这个问题，但前提是绑定时机正确。

内容的提问来源于stack exchange，提问作者SymmetricsWeb