多级嵌套 iframe 跨域时 postMessage 无法穿透，必须逐层建立可信通道、严格校验 origin、手动中转消息；浏览器 message 事件仅在直接通信双方间触发，不存在自动透传或隐式继承。
多级嵌套 iframe（比如父页 → 子 iframe → 孙 iframe）一旦跨域，postMessage 就不是“发一次就完事”，而是必须逐层建立可信通道、严格校验来源、手动中转消息——没有自动透传，也没有隐式继承。
为什么多级嵌套下 postMessage 不能直接穿透
浏览器的 message 事件只在**直接通信双方**之间触发：父页发给子 iframe，子 iframe 的 window 能收到；但子 iframe 再发给孙 iframe，父页是收不到的。更关键的是，子 iframe 的 event.source 是孙 iframe 的 window，但它的 event.origin 是孙 iframe 的源，和父页无关——你无法靠一层监听“捕获全链路消息”。
常见错误现象：
- 父页监听
message，却收不到孙 iframe 发出的数据 - 子 iframe 把父页发来的
event.data直接postMessage给孙 iframe，但没改targetOrigin，导致静默失败 - 孙 iframe 收到消息后，调用
event.source.postMessage(...)回复，结果父页因未监听子 iframe 的转发而丢失响应
逐层注册监听 + 显式中转消息的写法
每个跨域层级都必须独立完成“监听 → 校验 → 处理/转发”闭环。不能省略任何一环，否则链路断裂。
立即学习“前端免费学习笔记（深入）”；
以三层结构为例（https://a.com → https://b.com → https://c.com）：
- 父页（a.com）只与子 iframe（b.com）通信：监听子 iframe 的
message，校验event.origin === 'https://b.com'，再决定是否转发给自身逻辑或继续下发 - 子 iframe（b.com）要同时做两件事：
– 监听父页消息，校验event.origin === 'https://a.com'，并按需处理或转给孙 iframe
– 监听孙 iframe 消息，校验event.origin === 'https://c.com'，再转回父页（若需要） - 孙 iframe（c.com）只认子 iframe 的源：
if (event.origin !== 'https://b.com') return，绝不接受来自 a.com 的直连
子 iframe 中转示例（简化）：
window.addEventListener('message', (event) => {
// 先收父页来的
if (event.origin === 'https://a.com') {
// 转发给孙 iframe，targetOrigin 必须是孙的源
const grandson = document.getElementById('grandson');
if (grandson?.contentWindow) {
grandson.contentWindow.postMessage(
{ ...event.data, from: 'parent' },
'https://c.com'
);
}
return;
}
// 再收孙 iframe 来的
if (event.origin === 'https://c.com') {
// 转发回父页，targetOrigin 是父页源
window.parent.postMessage(
{ ...event.data, from: 'grandson' },
'https://a.com'
);
}
});
避免 origin 校验失效的三个硬约束
多级嵌套放大了校验失误的风险。一个环节放行了非法源，整条链路就不可信。
-
targetOrigin必须写死为明确域名，不能用'*'—— 子 iframe 若对孙 iframe 发送'*'，等于允许任意网站冒充孙 iframe 接收消息 - 校验必须用严格相等（
===），不能用includes或正则 ——event.origin.includes('c.com')会匹配https://evil-c.com - 子 iframe 必须区分“上游来源”和“下游目标”：它向孙 iframe 发消息时，
targetOrigin是https://c.com；它向父页发消息时，targetOrigin是https://a.com，二者不可混用
状态同步时最容易被忽略的时序问题
多级嵌套下，加载顺序不确定，load 事件不保证严格先后。孙 iframe 可能比子 iframe 更早 ready，但它无法主动联系父页——中间层没建好，通道就是断的。
实操建议：
- 子 iframe 在自身
load后，先向父页发一条{ type: 'READY', level: 'child' }，让父页知道“我已就绪，可收消息” - 孙 iframe 加载完成后，向子 iframe 发
{ type: 'READY', level: 'grandchild' }，子 iframe 收到后再通知父页“孙已就绪” - 所有发送前检查
contentWindow是否存在，避免Cannot read property 'postMessage' of null - 不要依赖“父页 onload 完毕即所有 iframe 都 ready”——它们是异步加载，需各自确认
真正麻烦的不是代码量，而是每层都要独立维护自己的通信状态机：谁发、谁收、谁校验、谁中转、谁兜底。漏掉一层，同步就卡死。
