postmessage是唯一安全跨域通信方案，但必须卡死三环节：监听iframe load事件确保contentwindow就绪、targetorigin写死为完整协议+域名+端口、接收方严格校验event.origin及event.data结构。
postMessage 是唯一能在预览窗口（iframe 或 popup）与主编辑器页面之间安全跨域通信的原生方案，但直接调用几乎必出问题——90% 的“发了没收到”“报错 Cannot read property 'postMessage' of null”都源于三个关键环节没卡死：目标窗口就绪状态、targetOrigin 格式、event.origin 校验。
iframe 预览时 contentWindow 为 null 怎么办
主编辑器往 iframe 预览页发消息前，iframe.contentWindow 是 null 并不罕见。不是代码写错了，而是你试图在 DOM 插入后立刻取引用，此时 iframe 还没加载、没初始化 JS 上下文。
- 必须监听
iframe.onload或iframe.addEventListener('load', ...)，且确保该事件触发后再取contentWindow - 如果预览页是
data:text/html,...或about:blank，load可能不触发或行为不一致，改用子页内主动发握手消息（如{ type: 'ready' }）更可靠 - 发送前加判空：
if (iframe.contentWindow) { iframe.contentWindow.postMessage(...) }，避免TypeError - 不要用
setTimeout等固定延时——网络波动、低端设备下完全不可控
targetOrigin 设成 '*' 就收不到消息
2025 年底起，Chrome 128+ 和 Firefox 125+ 已强制限制：targetOrigin 为 '*' 时，若目标窗口跨域，消息会被浏览器静默丢弃，不报错、不回调、不触发任何可观测行为。
- 必须写成完整协议 + 域名 + 端口，例如
'https://preview.example.com:8080'，端口不能省（http://localhost≠http://localhost:3000） - 开发时可用
'http://localhost:3000'，但上线前必须替换成真实生产域名，CI 流程里建议加检查脚本防漏 - 如果预览页支持多子域（如
user1.preview.com、user2.preview.com），不能靠通配符，得动态拼接或维护白名单数组 - 协议不一致（父页 https，预览页 http）也会被丢弃，确保二者协议严格一致
监听 message 时只比对 event.origin 不够
仅写 if (event.origin === 'https://preview.example.com') 是高危操作。恶意页面只要能嵌入你的编辑器 iframe，就能伪造 origin 字段（尤其当父页曾用过 '*'），进而触发任意逻辑。
- 必须组合校验：
event.origin在白名单内 +typeof event.data === 'object'+ 检查必要字段（如'type' in event.data） - 不要依赖
event.source做权限判断——它可被伪造；但可用于回传响应，因为event.source.postMessage()天然指向发来消息的那个窗口 - 建议加一次轻量握手：收到首次消息后，向
event.source发{ type: 'handshake', nonce: Date.now() }，要求对方回传相同nonce，超时（如 2s）未响应则丢弃后续 - 监听器绑定后，记得在页面卸载或预览销毁时调用
removeEventListener，否则内存泄漏且可能收到旧窗口残留消息
怎么让预览页主动通知编辑器渲染完成
预览页 HTML 渲染完毕、JS 执行完、样式加载好，不代表内容已稳定——比如图片还在加载、第三方脚本延迟执行。直接发 { type: 'rendered' } 很可能太早。
- 推荐在预览页用
window.addEventListener('DOMContentLoaded', ...)后再加一层requestIdleCallback或setTimeout(..., 0)延迟发送，确保主线程空闲 - 更稳妥的是监听
document.readyState === 'complete'且所有<img>的onload触发完毕 - 编辑器侧不要假设“一次通知=永远就绪”，应设计成可重入：收到
rendered后才开启编辑器同步逻辑，但允许重复收到并忽略 - 如果预览页是 SSR 渲染的静态 HTML，
DOMContentLoaded就足够；若是客户端渲染（React/Vue），需等框架mounted或useEffect完成后再发
load 事件已触发，但 React 还在 hydrate。这些时间差必须靠显式信号（而非隐式时机）来对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
