能跨域传数据，这是postMessage的核心设计目的；需目标窗口监听message事件并校验event.origin，使用targetOrigin精确匹配协议+域名+端口，仅支持结构化克隆数据。
postMessage 能不能跨域传数据
能，而且这是它最核心的设计目的。只要目标窗口存在（哪怕域名、协议、端口都不同），postMessage 就能发过去——但对方必须主动监听 message 事件并调用 event.source.postMessage() 回应，否则就是单向“喊话”，收不到反馈。
常见错误现象：Uncaught DOMException: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://example.com') does not match the current window's origin ('https://other.com')。这不是跨域限制，而是你传的 targetOrigin 参数写错了，比如写成 '*' 却期望只发给某特定源，或写死了却没匹配上实际打开的地址。
-
targetOrigin必须精确匹配目标窗口的origin（协议+域名+端口），不能是路径或带www/ 不带www的模糊匹配 - 开发时可临时用
'*'测试，但上线前必须换成具体 origin，否则存在安全风险 - 目标窗口未监听
message事件，或监听了但没校验event.origin，会导致消息被忽略或被恶意窗口劫持
怎么安全接收 postMessage 数据
接收方不校验来源就直接处理，等于把控制台钥匙交出去。必须检查 event.origin 和可选的 event.source，再解析 event.data。
使用场景：父页面监听 iframe、弹窗监听 opener、两个 tab 页面互相通信。
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('message', function(event) {
// 严格校验来源
if (event.origin !== 'https://trusted.example.com') return;
// 可选：确认是发给自己的（比如检查 event.source === window.opener）
if (event.source !== window.opener) return;
try {
const payload = JSON.parse(event.data);
console.log('收到数据:', payload);
} catch (e) {
console.warn('无效数据格式');
}
});
postMessage 传不了函数或 DOM 节点怎么办
postMessage 只支持结构化克隆（structured clone），也就是能序列化为 JSON 的数据类型。函数、Element、Window、undefined、Date（部分浏览器）、RegExp 等都会被丢弃或报错。
性能影响：大数据量（如 >10MB）可能阻塞主线程，尤其在低配设备上；频繁发送小消息也会触发大量事件循环调度。
- 传复杂对象前先
JSON.stringify()+JSON.parse()清洗一遍，去掉不可序列化字段 - 需要传文件或二进制数据，用
ArrayBuffer或Blob配合transfer参数（注意：仅限同源且需显式传递） - 不要试图传
this、document、location等宿主对象，它们不会被复制，只会变成null
iframe 里调用 parent.postMessage 总是失败
最常见的原因是 iframe 还没加载完成，就执行了 parent.postMessage()。此时 parent 可能是 null，或 window.parent 指向的是沙箱环境（比如设置了 sandbox 属性但没加 allow-scripts）。
兼容性影响：IE8–IE10 只支持字符串，不支持对象；所有现代浏览器都支持对象，但必须确保发送和接收两端都做降级处理。
- 确保 iframe 加载完成后再通信：
iframe.onload = () => { iframe.contentWindow.postMessage(...); } - 检查 iframe 标签是否含
sandbox属性，如有，必须包含allow-scripts才能执行 JS - 在 iframe 内访问
parent前，先判断if (window.parent !== window)，避免在非嵌入场景下报错
真正麻烦的不是语法，而是 origin 校验逻辑写得松、data 解析没 try-catch、跨域窗口生命周期管理缺失——这些地方一漏，线上就静默失败。
