必须用 postmessage通信，父子双方需严格校验origin和contentwindow可用性；document.domain已基本弃用，直接访问contentwindow会触发浏览器强制跨域拦截；targetorigin不可填"*"，须等iframe加载完成后再取location.origin；接收方必须同时校验event.origin和event.source；多级嵌套需每层独立监听、校验并转发，且转发前检查下层contentwindow是否存在。
必须用 postMessage，且父子双方都要做 origin 校验和 contentWindow 可用性检查，否则通信在生产环境大概率静默失败或被劫持。
为什么不能用 document.domain 或直接访问 contentWindow
同主域子域才可能用 document.domain，而现代 HTTPS 页面基本禁用它；直接读写 contentWindow.document 或调用其方法会立刻触发 Blocked a frame with origin "xxx" from accessing a cross-origin frame.。这不是报错级别问题，是浏览器强制拦截——连 try/catch 都捕获不到。真实项目里，90% 的“通信没反应”都卡在这一步，而不是 postMessage 本身有问题。
postMessage 发送时 targetOrigin 必须精确匹配当前 iframe 的 origin
填 "*" 看似省事，但浏览器会在 iframe 尚未加载完成、或发生重定向后，直接丢弃消息——控制台通常不报错，你根本不知道它没发出去。正确做法是等 load 事件后再取 iframe.contentWindow?.location?.origin：
iframe.addEventListener("load", () => {
const targetOrigin = iframe.contentWindow?.location?.origin;
if (targetOrigin && targetOrigin !== "null") {
iframe.contentWindow.postMessage({ type: "init", data: { token: "abc123" } }, targetOrigin);
}
});
注意：Safari 某些版本对跨域 iframe 的 location.origin 返回 "null"，此时需配合服务端 <meta http-equiv="origin-trial"> 或 fallback 到预设白名单域名（如 "https://pay.example.com"）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
接收方必须同时校验 event.origin 和 event.source
只监听 message 事件等于裸奔。恶意页面可以伪造 postMessage，所以每次收到消息都得确认两件事：
-
event.origin是否在可信域名白名单中（用Set存，别硬编码字符串比较） -
event.source是否等于你持有的那个iframe.contentWindow引用（防止其他窗口冒充）
示例：
window.addEventListener("message", (e) => {
const allowedOrigins = new Set(["https://widget.example.com", "https://test.widget.example.com"]);
if (!allowedOrigins.has(e.origin) || e.source !== iframe.contentWindow) return;
const payload = e.data;
// 此时才可信任并处理 payload
});
双向通信要各自独立发送，不能依赖自动转发
父页发给子 iframe 的消息，子 iframe 不会自动再发给它的子 iframe（孙级）。多级嵌套时，每层都得自己注册 message 监听器、校验来源、再调用 postMessage 转发——而且转发时的 targetOrigin 必须是下一层的真实域名，不能复用上一层的 event.origin。最容易被忽略的是：孙 iframe 可能还没加载完，中继层就急着转发，导致静默失败。务必在每次转发前检查 nextIframe.contentWindow 是否存在且非 null。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
