一：定义

postMessage 是 JavaScript 中用于‌跨上下文通信‌的 API，支持在窗口、iframe、Web Worker 等不同执行环境间传递消息，且允许跨源通信‌

二：特性

1：单向通信机制=>发送方调用 postMessage 发送消息，接收方通过监听 message 事件获取数据‌

2：安全限制=>可通过 targetOrigin 参数指定接收消息的窗口源（协议+域名+端口），防止消息泄露至不可信目标‌

3：数据序列化=>支持字符串、对象等可序列化数据，底层使用‌结构化克隆算法‌处理复杂数据类型

三：语法

targetWindow.postMessage(message, targetOrigin, [transfer]);  

message=>传递的数据
targetOrigin=>接收方的 URL 源
[transfer]=>转移对象所有权

四：应用场景

1：跨窗口/iframe通信

// 父页面发送消息  
const iframe = document.getElementById("childFrame");  
iframe.contentWindow.postMessage("update", "https://child-domain.com");  

// 子页面监听消息  
window.addEventListener("message", (event) => {  
  if (event.origin === "https://parent-domain.com") {  
    console.log("收到父页面消息:", event.data); // "update"  
  }  
});  

2：web Worker线程通信

// 主线程  
const worker = new Worker("worker.js");  
worker.postMessage({ type: "INIT", data: "Hello!" });  

// Worker 线程  
self.addEventListener("message", (event) => {  
  console.log("收到消息:", event.data); // { type: "INIT", data: "Hello!" }  
});  

3：跨标签页通信

五：注意点

1：结构化克隆算法=>无法处理函数、DOM 节点等非序列化类型‌

2：安全验证=>严格验证 event.origin‌：防止恶意页面伪造消息‌

3：性能优化=>减少高频消息发送，避免主线程阻塞