targetOrigin必须逐层匹配接收方实际origin，父页→子iframe→孙iframe三级嵌套中，每层只能填该层直接接收方的精确origin（如'https://child.example.com'），不可跳过中间层或用'*'，否则消息静默丢失。
多级 iframe 中 postMessage 的 targetOrigin 怎么写才不丢消息
父页 → 子 iframe → 孙 iframe 这种三级嵌套下，postMessage 的 targetOrigin 必须逐层匹配，不能跳过中间层或写成通配符。
常见错误是：父页直接向孙 iframe 发消息，用 iframe.contentWindow.postMessage(data, 'https://grandchild.com') —— 但孙 iframe 的 window 对象根本不在父页的 DOM 节点树上，contentWindow 是 null 或指向错误上下文。
- 必须由子 iframe 充当“中继”：父页发给子 iframe，子 iframe 校验后转发给孙 iframe
- 每层的
targetOrigin只能填**该层接收方的实际 origin**，比如子 iframe 是https://child.example.com，孙 iframe 是https://grandchild.example.com，就不能在父页里把targetOrigin写成后者 - 子 iframe 转发时，要用自己拿到的
event.source（即父页的window）或显式保存的parentWindow引用，而不是依赖window.parent—— 后者在某些嵌套深度下可能被浏览器限制
子 iframe 如何安全地把孙 iframe 的状态同步回父页
不能让孙 iframe 直接调用 window.parent.parent.postMessage() —— 这会绕过子 iframe 的校验逻辑，也破坏了层级隔离。
正确做法是：孙 iframe 只向它的直接父（即子 iframe）发消息；子 iframe 收到后，做两件事：校验 event.origin、封装数据再向上转发。
立即学习“前端免费学习笔记（深入）”；
- 孙 iframe 发送：
window.parent.postMessage({ type: 'STATUS_UPDATE', data: { height: 420 } }, 'https://child.example.com') - 子 iframe 监听并转发：
event.source.postMessage({ from: 'grandchild', ...event.data }, 'https://parent.example.com') - 父页监听时，只信任来自子 iframe 的 origin，不再二次校验孙 iframe —— 因为子 iframe 已承担了可信中继角色
多级嵌套下 message 事件监听器注册时机容易出错
孙 iframe 的 window.addEventListener('message', ...) 必须在它自己的全局作用域中尽早执行（比如 <script> 第一行），不能等 DOMContentLoaded 或其他异步逻辑之后。
否则父页或子 iframe 在孙 iframe 尚未注册监听器时就发消息，消息会静默丢失 —— 浏览器不会排队，也不报错。
- 避免在孙 iframe 的
DOMContentLoaded或load事件里注册message监听器 - 不要依赖
document.write或动态 script 注入来加载监听逻辑，时序不可控 - 如果孙 iframe 是通过 JS 动态创建的（比如
document.createElement('iframe')），要在设置src前就绑定监听器，否则首次加载完成前无法收消息
iframe-resizer 在多级嵌套中如何避免尺寸计算错乱
iframe-resizer 默认只处理一级嵌套，遇到子 iframe 里再嵌孙 iframe 时，若孙 iframe 内容高度变化，子 iframe 的 body 高度可能没及时重绘，导致父页收到的尺寸仍是旧值。
根本原因是：子 iframe 的 body.scrollHeight 不会自动响应其内部 iframe 的尺寸变化，除非手动触发重排或监听子 iframe 的 resize 事件。
- 在孙 iframe 里调用
parentIframeResizer.sendMessage({ type: 'heightChanged' })（需提前约定协议） - 子 iframe 收到后，主动调用
document.body.offsetHeight或getBoundingClientRect()强制重排，再通知父页 - 禁用
waitForLoad: true，改用autoResize: true+ 手动resize()触发，避免等待子 iframe 的 load 事件错过内部变化
iframe 标签那么简单。每一层都引入新的 origin 边界、新的事件生命周期、新的 DOM 渲染依赖。最常被忽略的是：孙 iframe 的 postMessage 目标窗口引用，往往不是 window.parent，而是由子 iframe 显式传入的 parentWindow —— 这个引用必须在子 iframe 初始化阶段就建立并透传，不能靠运行时推导。 
