一、引言
在現代 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)
