前端面试题：浏览器两个 tab 都是同域，如何在一个tab 向另一个 tab 发消息

正文

请到「今天看啥」查看全文

---

2. BroadcastChannel API

现代浏览器提供的专用通信 API，允许同源页面通过命名频道通信。

// Tab A 发送消息
const channel = new BroadcastChannel('my_channel');
channel.postMessage({ content: 'Hello Tab B!' });

// Tab B 接收消息
const channel = new BroadcastChannel('my_channel');
channel.onmessage = (e) => {
  console.log('Received:', e.data);
};

特点 ：

• 直接支持结构化数据（对象、数组等）。
• 需手动关闭频道（ channel.close() ）。
• 兼容性良好（支持 Chrome 54+、Firefox 38+、Edge 79+）。

---

3. 通过 window.postMessage （需窗口引用）

如果两个 Tab 存在引用关系（如通过 window.open 打开），可直接通过 postMessage 通信。

// Tab A 打开 Tab B 并发送消息

请到「今天看啥」查看全文