HTML5怎样用postMessage跨窗口传数据_HTML5跨窗传数法【讲解】_技术教程

能跨域传数据，这是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、跨域窗口生命周期管理缺失——这些地方一漏，线上就静默失败。