一、引言
在现代 Web 应用开发中，我们常常会遇到需要在不同浏览器标签页之间进行通信的需求。例如，在一个电商应用中，用户在一个标签页中添加商品到购物车，希望在其他标签页中也能实时显示购物车的更新信息。传统的实现方式可能会依赖 localStorage 结合 storage 事件，但这种方式存在诸多限制，如性能问题、5MB 大小限制等。而 BroadcastChannel API 则为我们提供了一种更高效、更强大的跨标签页通信解决方案。
二、BroadcastChannel API 简介
BroadcastChannel API 是 HTML5 新增的一个 API，用于在同源的不同浏览器窗口、标签页、iframe 等之间进行实时通信。它具有以下优点：
- 更高效：不依赖
storage事件，性能更好。 - 无大小限制：没有
localStorage的 5MB 大小限制。 - 支持复杂数据类型：可以传输复杂的数据结构，如对象、数组等。
- 原生支持跨标签页通信：使用简单，易于实现。
三、兼容性表格
| 浏览器 | 支持版本 |
|---|---|
| Chrome | 54+ |
| Firefox | 38+ |
| Safari | 10.1+ |
| Edge | 17+ |
| Opera | 41+ |
从这个表格可以看出，BroadcastChannel API 在现代主流浏览器中都有较好的支持，如果你不需要兼容特别旧的浏览器版本，那么可以放心使用。
四、实现跨标签页通信的代码示例
1. 封装跨标签页通信类
首先，我们创建一个 TabCommunication 类来封装 BroadcastChannel API 的使用。
/*** 跨标签页通信类* 使用 BroadcastChannel API 实现* * 优点：* 1. 更高效，不依赖 storage 事件* 2. 没有 5MB 大小限制* 3. 支持复杂数据类型* 4. 原生支持跨标签页通信* * @class TabCommunication*/
class TabCommunication {constructor(channelName = 'tab_comm_channel') {this.channelName = channelName;this.channel = new BroadcastChannel(channelName);this.listeners = {};this.channel.onmessage = (event) => {const { type, data } = event.data;if (this.listeners[type]) {this.listeners[type].forEach(callback => callback(data));}};}/*** 发送消息到其他标签页* @param {string} type 消息类型* @param {*} data 消息数据*/send(type, data) {this.channel.postMessage({ type, data });}/*** 监听特定类型的消息* @param {string} type 消息类型* @param {function} callback 回调函数* @returns {function} 取消监听的函数*/on(type, callback) {if (!this.listeners[type]) {this.listeners[type] = [];}this.listeners[type].push(callback);// 返回取消监听函数return () => this.off(type, callback);}/*** 移除监听* @param {string} type 消息类型* @param {function} callback 回调函数*/off(type, callback) {if (!this.listeners[type]) return;const index = this.listeners[type].indexOf(callback);if (index !== -1) {this.listeners[type].splice(index, 1);}if (this.listeners[type].length === 0) {delete this.listeners[type];}}/*** 关闭通信通道*/close() {this.channel.close();}
}const tabComm = new TabCommunication();
export default tabComm;
2. 消息发送页面（sender.html）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>消息发送者</title>
</head><body><div id="app"><button data-message="这是来自 sender.html 的消息1">发送消息1</button><button data-message="这是来自 sender.html 的消息2">发送消息2</button></div><script type="module">import tabComm from './tabCommunication.js';const app = document.getElementById('app');// 统一处理按钮点击app.addEventListener('click', async (e) => {if (e.target.tagName !== 'BUTTON') return;try {const message = e.target.dataset.message;await tabComm.send('message', { text: message });alert(`消息已发送: ${message}`);} catch (error) {console.error('发送消息失败:', error);alert('发送消息失败，请检查控制台');}});// 页面关闭时关闭通信通道window.addEventListener('beforeunload', () => {tabComm.close();});</script>
</body></html>
3. 消息接收页面（receiver.html）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>消息接收者</title>
</head><body><div id="messageDisplay"></div><script type="module">import tabComm from './tabCommunication.js';const messageDisplay = document.getElementById('messageDisplay');const unsubscribe = tabComm.on('message', (data) => {messageDisplay.textContent = `收到消息: ${data.text}`;});// 页面关闭时取消监听并关闭通道window.addEventListener('beforeunload', () => {unsubscribe();tabComm.close();});</script>
</body></html>
五、代码解释
1. TabCommunication 类
- 构造函数：初始化
BroadcastChannel实例，并为onmessage事件添加处理函数，当接收到消息时，会根据消息类型调用相应的回调函数。 send方法：用于向其他标签页发送消息，消息包含类型和数据。on方法：用于监听特定类型的消息，将回调函数添加到对应的监听器数组中，并返回一个取消监听的函数。off方法：用于移除指定类型的监听器。close方法：关闭BroadcastChannel实例。
2. sender.html
- 通过按钮点击事件触发消息发送，调用
tabComm.send方法发送消息。 - 在页面关闭时，调用
tabComm.close方法关闭通信通道。
3. receiver.html
- 使用
tabComm.on方法监听message类型的消息，当接收到消息时，更新页面显示。 - 在页面关闭时，调用取消监听函数和
tabComm.close方法取消监听并关闭通道。
六、总结
通过 BroadcastChannel API，我们可以轻松实现跨标签页的实时通信，避免了传统方法的诸多限制。在实际开发中，如果你需要在同源的不同标签页之间进行数据交互，不妨考虑使用 BroadcastChannel API。同时，要注意浏览器的兼容性问题，确保你的目标用户使用的浏览器支持该 API。
![微信小程序 - [渲染层错误] Uncaught TypeError: Cannot read property ‘D‘ of undefined](http://pic.xiahunao.cn/微信小程序 - [渲染层错误] Uncaught TypeError: Cannot read property ‘D‘ of undefined)
