BroadCast Channel 可以幫我們創建一個用於廣播的通信頻道。當所有頁面都監聽同一頻道的消息時，其中某一個頁面通過它發送的消息就會被其他所有頁面收到。它的API和用法都非常簡單。下面我們來簡單了解一下：
一、Broadcast Channel 是什么
1、首先，我們想一個問題：在前端如何實現廣播式通信呢？
我們經常會用 postMessage 來實現頁面間的通信，但這種方式更像是點對點的通信。對於一些需要廣播（讓所有頁面知道）的消息，用 postMessage 不是非常自然。
Broadcast Channel 就是用來彌補這個缺陷的。當我們使用廣播通信時我們只要在一個頁面發送信息，其他所有的頁面都能接收到這條信息，但是前提是同源頁面。
顧名思義，Broadcast Channel 會創建一個所有同源頁面都可以共享的（廣播）頻道，因此其中某一個頁面發送的消息可以被其他頁面監聽到。
2、Broadcast Channel 通信方式
Broadcast Channel API允許同源（同一站點）的瀏覽器上下文（包括窗口，標簽，框架或iframe）之間的簡單通信。通信的方式如圖：
二、前端跨頁面通信 Broadcast Channel 與 window.postMessage區別
BroadcastChannel，叫做“廣播頻道”，官方文檔說，該API是用於同源不同頁面之間完成通信的功能。
與window.postMessage的區別：BroadcastChannel只能用於同源的頁面之間進行通信，而window.postMessage卻可以用於任何的頁面之間，
基於BroadcastChannel的同源策略，它無法完成跨域的數據傳輸，跨域的情況，我們還是使用window.postMessage來處理
三、如何使用廣播通信
Broadcast Channel 的 API 非常簡單易用。
1、創建：首先我們會使用構造函數創建一個實例：
const bc = new BroadcastChannel('test_channel');
test_channel 參數用來指定channel的名稱，用以標識這個 channel，在其他頁面，可以通過傳入相同的 name 來使用同一個廣播頻道，連接到相同名稱的BroadcastChannel，可以監聽到這個channel分發的消息。用 MDN 上的話來解釋就是：
There is one single channel with this name for all browsing contexts with the same origin.
該 name 值可以通過實例的 bc.name 屬性獲得。
2、監聽消息：廣播創建完成后，就可以在頁面監聽廣播的消息：
bc.onmessage = function(e) { console.log('receive:', e.data); }; // 對於錯誤也可以綁定監聽：
bc.onmessageerror = function(e) { console.warn('error:', e); };
除了為.onmessage賦值這種方式，也可以使用addEventListener來添加'message'監聽。
3、發送消息：廣播實例也有一個對應的postMessage用於發送消息：bc.postMessage('hello')
4、關閉廣播監聽：
可以看到，上述短短幾行代碼就可以實現多個頁面間的廣播通信，非常方便。而有時我們希望取消當前頁面的廣播監聽：
（1）一種方式是取消或者修改相應的'message'事件監聽
（2）另一種簡單的方式就是使用 Broadcast Channel 實例為我們提供的close方法：bc.close();
兩者是有區別的：
（1）取消'message'監聽只是讓頁面不對廣播消息進行響應，Broadcast Channel 仍然存在；
（2）而調用close方法這會切斷與 Broadcast Channel 的連接，瀏覽器才能夠嘗試回收該對象，因為此時瀏覽器才會知道用戶已經不需要使用廣播頻道了。
在關閉后調用postMessage會出現如下報錯：
如果之后又再需要廣播，則可以重新創建一個相同 name 的 Broadcast Channel。