雖然日常開發(fā)并不常見，偶爾還是會閃現(xiàn)這樣一個需求： 一個項目同時打開了兩個頁面，一個頁面的某個操作我想讓另一個頁面也同時響應(yīng)；比如商品列表頁面點(diǎn)擊收藏按鈕，這個商品詳情頁面的收藏圖標(biāo)也同時變成確定狀態(tài)；類似這種操作今天來分享一個非常簡單的跨頁面通信方法：?Broadcast Channel；

BroadcastChannel，就字面意思來言，叫做“廣播頻道”，官方文檔說，該API是用于同源不同頁面之間完成通信的功能

一、與postMessage區(qū)別：

它與postMessage的區(qū)別就是：BroadcastChannel只能用于同源的頁面之間進(jìn)行通信，而postMessage卻可以用于任何的頁面之間的通信，換句話說，BroadcastChannel可以認(rèn)為是postMessage的一個實例，它承擔(dān)了postMessage的一個方面的功能。

二、瀏覽器支持：

再來看看BroadcastChannel的瀏覽器支持情況吧，這個才是每個前端們最關(guān)心的問題：

三、?BroadcastChannel的使用方法：

首先我們先要初始化一下BroadcastChannel：

const setChannel = new BroadcastChannel('demos');

傳入一個string,用這個來標(biāo)識BroadcastChannel

發(fā)送消息： 發(fā)送消息的話使用它的postMessage方法，但是記住在使用的頁面也要初始化BroadcastChannel：

setChannel.postMessage('要發(fā)送消息啦啦啦啦啦啦啦');

監(jiān)聽消息： 要想監(jiān)聽方法的話使用onmessage方法來獲?。?/p>

setChannel.onmessage =function(e) {

????console.log('接收到消息:', e.data);

????//一大波你要要的操作

};

關(guān)閉連接：

setChannel..close();

收工！