iframe 必须完全加载（即 load 事件触发后）才能安全接收父页面通过 window.postMessage() 发送的消息；在加载完成前调用 postMessage 会因目标窗口未就绪而静默失败。
iframe 必须完全加载（即 `load` 事件触发后）才能安全接收父页面通过 `window.postmessage()` 发送的消息；在加载完成前调用 `postmessage` 会因目标窗口未就绪而静默失败。
在 Web 分析场景（如向 Adobe Analytics 上报页面加载元数据）中，常需将主页面的上下文信息（如 URL、用户 ID、时间戳等）及时传递给嵌入的 iframe。但需明确一个关键前提：postMessage 的接收方必须是一个已初始化、可访问的 contentWindow 对象，且其全局执行环境（global scope）已就绪——这通常发生在 iframe 的 load 事件之后。
❌ 为什么“加载前发送”不可行？
- iframe 的 contentWindow 属性虽在 DOM 插入后立即可读，但其内部 window 对象尚未完成 JavaScript 初始化；
- 若父页面在 iframe 的
- 即使是同源 iframe，若 src 尚未开始加载或 HTML 文档尚未解析完成，contentWindow 的 postMessage 方法可能不可用或不响应。
✅ 正确做法：等待 load 事件后再通信
<iframe id="analytics-iframe" src="https://example.com/analytics.html"></iframe>
const iframe = document.getElementById('analytics-iframe');
// 确保 iframe 加载完成后再发送数据
iframe.addEventListener('load', function () {
const payload = {
pageUrl: window.location.href,
pageTitle: document.title,
timestamp: Date.now(),
// 其他分析所需字段...
};
try {
iframe.contentWindow.postMessage(payload, 'https://example.com'); // 指定精确 origin 更安全
} catch (e) {
console.warn('Failed to post message to iframe:', e);
}
});
⚠️ 注意事项：
- 始终指定 targetOrigin 参数（而非 '*'），避免 XSS 风险；
- 在 iframe 内需监听 message 事件并校验 event.origin，确保来源可信；
- 若 iframe 是动态创建的，务必在设置 src 后再绑定 load 事件（顺序错误会导致错过事件）；
- 不要依赖 setTimeout 模拟“提前发送”——它不可靠、不可移植，且无法解决底层时序问题。
替代方案（适用于极端低延迟需求）
若业务要求“尽可能早”地注入数据（例如首屏指标需毫秒级捕获），可考虑：
- URL 参数传递：将必要参数拼入 iframe.src（如 ?pageUrl=...&ts=...），由 iframe 页面在 DOMContentLoaded 阶段解析；
- document.write 或内联脚本（仅限同源且可控场景）：直接写入含初始数据的 <script>；</script>
- Service Worker + Cache API：预缓存 iframe 资源并注入运行时上下文（复杂度高，适用 PWA 架构）。
总之，postMessage 是跨文档通信的安全基石，但它不是“异步魔法”——它严格遵循浏览器的加载生命周期。尊重 load 事件，是确保数据可靠送达的唯一稳健路径。
