必须逐层匹配接收方实际origin，父页→子iframe→孙iframe三级嵌套中，每层targetorigin只能填该层直接接收方的精确origin（如'https://child.example.com'），不可跳过中间层或用'*'，否则消息静默丢失。
多层 iframe 中 postMessage 的 targetOrigin 怎么写才不丢消息
必须逐层匹配接收方的实际 origin，不能跳过中间层，也不能用 '*'。父页 → 子 iframe → 孙 iframe 三级嵌套时，每层 postMessage 的 targetOrigin 只能填**该层直接接收方的精确源**（比如 'https://child.example.com'），否则消息静默丢失。
常见错误是：父页试图绕过子 iframe，直接向孙 iframe 发送消息，代码类似 grandchildIframe.contentWindow.postMessage(data, 'https://grandchild.example.com')——但此时 grandchildIframe 是子 iframe 内部的 DOM 节点，父页根本拿不到它的 contentWindow（值为 null 或指向错误上下文）。
- 子 iframe 必须显式暴露自己的
contentWindow给父页（例如首次加载后通过postMessage携带{ type: 'HANDSHAKE', ref: window }） - 父页转发时，目标窗口必须是子 iframe 的
contentWindow，targetOrigin必须是子 iframe 的实际 origin - 子 iframe 收到后，再用自己的
contentWindow向孙 iframe 转发，targetOrigin改为孙 iframe 的 origin
子 iframe 如何安全中转消息而不破坏隔离
子 iframe 不是透明管道，而是可信中继节点。它必须做两件事：校验来源 + 封装再发。不能让孙 iframe 直接调用 window.parent.parent.postMessage()，这会绕过校验、暴露父页接口、也违反层级契约。
正确流程是：
- 孙 iframe 只向它的直接父（即子 iframe）发消息：
window.parent.postMessage({ type: 'STATUS_UPDATE', data: { height: 420 } }, 'https://child.example.com') - 子 iframe 监听
message事件，先检查event.origin === 'https://grandchild.example.com'，再提取数据 - 子 iframe 用自己缓存的父页窗口引用（非
window.parent，因跨域不可写），调用parentWindow.postMessage({ from: 'grandchild', ... }, 'https://parent.example.com')
注意：window.parent 在跨域下可读但不可写，且无法访问其 contentWindow；更可靠的方式是在握手阶段由父页传入一个可写的窗口引用。
动态创建的 iframe 怎么确保 contentWindow 可用
如果子 iframe 是点击后才 appendChild 创建的，或孙 iframe 是子 iframe 内部 JS 动态插入的，那么未等加载完成就调用 contentWindow.postMessage() 会报错或静默失败——因为此时 contentWindow 为 null。
- 父页对子 iframe 必须监听
load事件，再执行首次通信 - 子 iframe 对孙 iframe 也要监听其
load，不能在appendChild后立刻发消息 - 推荐加超时兜底：等待
contentWindow非null且contentWindow.location.origin已知（可用iframe.contentDocument?.location?.origin判断，但需同源才可读；跨域只能靠load+ 握手确认）
为什么 event.source 不能当“上一级窗口”用
event.source 是发送方的 window 对象，不是“父级”。比如孙 iframe 直接向父页发消息，event.source 就是孙 iframe 自己的 window，不是中间那层子 iframe。误用它会导致转发错对象、甚至循环通信。
- 转发时不要依赖
event.source.postMessage()原路返回，除非你明确知道谁发的、该回给谁 - 每层应维护自己信任的目标窗口引用（如子 iframe 缓存父页传来的
parentRef，孙 iframe 缓存子 iframe 传来的parentRef） -
event.origin只用于身份校验，不能用于定位目标窗口；它始终是发送方的协议+域名+端口，和接收方无关
多层嵌套真正的难点不在语法，而在于每一层都得主动承担中继职责——没人帮你自动透传，也没人替你做校验。漏掉一层监听、错配一次 targetOrigin、或依赖了不可靠的 window.parent，整条链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
