目錄一、Broadcast Channel API 簡介二、Broadcast Channel API 應(yīng)用場景2.1 實現(xiàn)同源頁面間數(shù)據(jù)同步2.2 在其它 Tab 頁面中監(jiān)測用戶操作三、Broadcast Channel API vs postMessage API四、總結(jié)五、參考資源一、Broadcast Channel API 簡介

Broadcast Channel API 可以實現(xiàn)同源下瀏覽器不同窗口、Tab 頁或者 iframe 下的瀏覽器上下文之間的簡單通訊。通過創(chuàng)建一個監(jiān)聽某個頻道下的 BroadcastChannel 對象，你可以接收發(fā)送給該頻道的所有消息。

（圖片來源 —— https://developer.mozilla.org/zh-CN/docs/Web/API/Broadcast_Channel_API）

了解完 Broadcast Channel API 的作用之后，我們來看一下如何使用它：

// 創(chuàng)建一個用于廣播的通信通道const channel = new BroadcastChannel(’my_bus’);// 在my_bus上發(fā)送消息channel.postMessage(’大家好，我是阿寶哥’);// 監(jiān)聽my_bus通道上的消息channel.onmessage = function(e) { console.log(’已收到的消息：’, e.data);};// 關(guān)閉通道channel.close();

通過觀察以上示例，我們可以發(fā)現(xiàn) Broadcast Channel API 使用起來還是很簡單的。該 API 除了支持發(fā)送字符串之外，我們還可以發(fā)送其它對象，比如 Blob、File、ArrayBuffer、Array 等對象。另外，需要注意的是，在實際項目中，我們還要考慮它的兼容性：

（圖片來源 —— https://caniuse.com/?search=Broadcast%20Channel%20API）

由上圖可知，在 IE 11 及以下的版本，是不支持 Broadcast Channel API，這時你就可以考慮使用現(xiàn)成的 broadcast-channel-polyfill 或者基于 localStorage 和 storage 事件來實現(xiàn)。

二、Broadcast Channel API 應(yīng)用場景

利用 Broadcast Channel API，我們可以輕易地實現(xiàn)同源頁面間一對多的通信。該 API 的一些使用場景如下：

實現(xiàn)同源頁面間數(shù)據(jù)同步； 在其它 Tab 頁面中監(jiān)測用戶操作； 指導(dǎo) worker 執(zhí)行一個后臺任務(wù)； 知道用戶何時登錄另一個 window/tab 中的帳戶。

為了讓大家能夠更好地掌握 Broadcast Channel API，阿寶哥以前面 2 個使用場景為例，來介紹一下該 API 的具體應(yīng)用。

2.1 實現(xiàn)同源頁面間數(shù)據(jù)同步

html

<h3 id='title'>你好，</h3><input id='userName' placeholder='請輸入你的用戶名' />

JS

const bc = new BroadcastChannel('abao_channel');(() => { const title = document.querySelector('#title'); const userName = document.querySelector('#userName'); const setTitle = (userName) => { title.innerHTML = '你好，' + userName; }; bc.onmessage = (messageEvent) => { if (messageEvent.data === 'update_title') { setTitle(localStorage.getItem('title')); } }; if (localStorage.getItem('title')) { setTitle(localStorage.getItem('title')); } else { setTitle('請告訴我們你的用戶名'); } userName.onchange = (e) => { const inputValue = e.target.value; localStorage.setItem('title', inputValue); setTitle(inputValue); bc.postMessage('update_title'); };})();

在以上示例中，我們實現(xiàn)了同源頁面間的數(shù)據(jù)同步。當任何一個已打開的頁面中，輸入框的數(shù)據(jù)發(fā)生變化時，頁面中的 h3#title 元素的內(nèi)容將會自動實現(xiàn)同步更新。

2.2 在其它 Tab 頁面中監(jiān)測用戶操作

利用 Broadcast Channel API，除了可以實現(xiàn)同源頁面間的數(shù)據(jù)同步之外，我們還可以利用它來實現(xiàn)在其它 Tab 頁面中監(jiān)測用戶操作的功能。比如，當用戶在任何一個 Tab 中執(zhí)行退出操作后，其它已打開的 Tab 頁面也能夠自動實現(xiàn)退出，從而保證系統(tǒng)的安全性。

html

<h3 id='status'>當前狀態(tài)：已登錄</h3><button onclick='logout()'>退出</button>

JS

const status = document.querySelector('#status');const logoutChannel = new BroadcastChannel('logout_channel');logoutChannel.onmessage = function (e) { if (e.data.cmd === 'logout') { doLogout(); }};function logout() { doLogout(); logoutChannel.postMessage({ cmd: 'logout', user: '阿寶哥' });}function doLogout() { status.innerText = '當前狀態(tài)：已退出';}

在以上示例中，當用戶點擊退出按鈕后，當前頁面會執(zhí)行退出操作，同時會通過 logoutChannel 通知其它已打開的頁面執(zhí)行退出操作。

三、Broadcast Channel API vs postMessage API

與 postMessage() 不同的是，你不再需要維護對 iframe 或 worker 的引用才能與其進行通信：

const popup = window.open(’https://another-origin.com’, ...);popup.postMessage(’Sup popup!’, ’https://another-origin.com’);

Broadcast Channel API 只能用于實現(xiàn)同源下瀏覽器不同窗口、Tab 頁或者 iframe 下的瀏覽器上下文之間的簡單通訊。而 postMessage API 卻可用于實現(xiàn)不同源之間消息通信。由于保證消息來自同一來源，因此無需像以前那樣使用以下方法來驗證消息：

const iframe = document.querySelector(’iframe’);iframe.contentWindow.onmessage = function(e) { if (e.origin !== ’https://expected-origin.com’) { return; } e.source.postMessage(’Ack!’, e.origin);};四、總結(jié)

Broadcast Channel API 是一個非常簡單的 API，內(nèi)部包含了跨上下文通訊的接口。在支持該 API 的瀏覽器中，我們可以利用該 API 輕松地實現(xiàn)同源頁面間的通信。而對于不支持該 API 的瀏覽器來說，我們就可以考慮使用 localStorage 和 storage 事件來解決同源頁面間通信的問題。

五、參考資源

MDN - Broadcast Channel APIBroadcastChannel API: A Message Bus for the Web

以上就是JavaScript 如何實現(xiàn)同源通信的詳細內(nèi)容，更多關(guān)于JavaScript 同源通信的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！