window.postMessage 和 BroadcastChannel 的区别差异

最近在项目实战中，需要使用跨页面通信来传递数据，所以对两种通信方式做了一下比对研究

window.postMessage

// 发送方
window.postMessage({ type: 'message', data: 'Hello' }, 'https://target-origin.com');

// 接收方
window.addEventListener('message', (event) => {
  if (event.origin === 'https://target-origin.com') {
    console.log(event.data);
  }
});

特点：

1. 基于窗口对象 - 直接与特定窗口通信

2. 支持跨域 - 可以指定目标域，与不同源的窗口通信

3. 需要明确目标 - 需要目标窗口的引用（window.open()、iframe.contentWindow、window.opener等）

4. 安全控制 - 可以验证 event.origin 确保来源安全

5. 点到点通信 - 直接与特定窗口通信

BroadcastChannel

// 发送方和接收方（需要在同一个信道）
const channel = new BroadcastChannel('contract-channel');

// 发送消息
channel.postMessage({ type: 'update', data: 'new data' });

// 接收消息
channel.addEventListener('message', (event) => {
  console.log(event.data);
});

特点：

1. 基于信道名称 - 所有使用相同信道名的页面都能通信

2. 同源限制 - 只能在同源的上下文间通信（相同协议、域名、端口）

3. 发布-订阅模式 - 多方通信，一个发送，所有订阅者接收

4. 不需要目标引用 - 只需信道名称，不需要知道其他页面的引用

5. 自动管理连接 - 信道自动处理连接和断开

主要区别对比

 

特性	window.postMessage	BroadcastChannel
通信范围	可以跨域	必须同源
目标指定	需要明确的目标窗口引用	基于信道名称自动发现
通信模式	点到点	发布-订阅（多对多）
安全验证	需要手动检查 event.origin	同源自动安全
使用场景	iframe通信、跨域通信、弹窗通信	同源多标签页/Worker间通信
性能	相对较重，需要目标引用	相对轻量，基于信道

使用场景建议

使用 window.postMessage 当：

• 需要与 iframe、弹出窗口 或 父窗口 通信

• 需要 跨域通信

• 需要与 特定的目标窗口 通信

使用 BroadcastChannel 当：

• 在 同一网站的不同标签页 间通信

• 在 主线程和Web Worker 间通信

• 需要 多方广播 消息

• 所有通信方都在 同一域名下

最终，由于我的需求要求是同源域名下，且只是跨标签页通信，最终就选择了 BroadcastChannel 方式来实现