postmessage收不到消息的根本原因是目标窗口引用失效或监听时机不当；需检查targetwindow有效性、延迟监听绑定、验证event.origin并配合event.source握手确认，避免跨域伪造与大对象阻塞。
postMessage 为什么总是收不到消息
根本原因通常是目标窗口引用失效或监听时机不对。window.open() 返回的句柄在页面刷新或关闭后立即失效；而 addEventListener('message', ...) 如果在目标窗口加载完成前就注册，可能错过首条消息。
- 发送方务必检查
targetWindow是否为有效对象且未关闭（targetWindow.closed === false） - 接收方应在
DOMContentLoaded或window.onload后再绑定message监听器 - 跨域时，
event.source是唯一可靠的目标引用，不要缓存初始window.open()返回值用于后续通信 - 发送时必须指定准确的
targetOrigin（如'https://example.com'），用'*'在生产环境会触发浏览器静默丢弃
如何安全验证 message 事件来源
仅靠 event.origin 判断不可靠——它可被伪造（尤其在 iframe 场景下），真正可信的是 event.source 对象本身 + 显式响应握手。
- 接收方收到消息后，应先检查
event.origin是否在白名单内，再调用event.source.postMessage('ACK', event.origin)发起确认 - 发送方需设置超时机制等待 ACK，未收到则视为通道异常（例如对方页面已跳转）
- 避免直接信任
event.data中的任意字段做权限判断，敏感操作必须结合event.source的运行时身份（如通过event.source.location.href获取当前 URL，注意同源限制）
iframe 与 popup 窗口的通信差异
两者都用 postMessage，但生命周期管理和引用获取方式完全不同。
- iframe：用
document.getElementById('myIframe').contentWindow获取引用，但需确保 iframe 已加载完成（监听load事件），且主域与 iframe 域满足同源或已配置 CORS - popup：依赖
window.open()返回值，但该值在用户手动关闭窗口后变为null，且无法重新获取；建议在 popup 页面主动向 opener 发送初始化消息，由 opener 缓存其event.source - iframe 可通过
window.parent反向通信，popup 则只能靠 opener 持有 reference，没有反向全局引用
大消息或频繁通信导致卡顿怎么办
postMessage 是异步但非流式传输，序列化/反序列化大对象（如 10MB JSON）会阻塞主线程，频繁调用还会引发事件队列堆积。
- 单次传递数据不超过 1MB，超过请拆分为 chunk 并加序号，接收方拼接（注意顺序和丢失重传）
- 高频场景（如实时拖拽同步）改用
MessageChannel：创建一对端口，port1给子窗口，port2留在主窗口，之后通信走port.postMessage()，性能提升明显且不触发全局事件 - 避免在
message回调里直接操作 DOM，先requestIdleCallback或setTimeout(..., 0)延迟更新
this 或回调函数过去，老老实实传纯数据 + 响应驱动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
