BroadcastChannel API用于在瀏覽器中實現(xiàn)跨標(biāo)簽頁通信。它允許不同標(biāo)簽頁之間以及同一瀏覽器會話中的所有標(biāo)簽頁之間共享消息和數(shù)據(jù)。
- 創(chuàng)建通道:
在每個要通訊的標(biāo)簽頁中，通過new BroadcastChannel("channelName")創(chuàng)建一個新的BroadcastChannel對象，其中channelName是通道的名稱（自定義），用于標(biāo)識通信的通道，便于查找具有相同名稱的標(biāo)簽頁。
/* 在A標(biāo)簽頁中創(chuàng)建BroadcastChannel實例 */
const channel = new BroadcastChannel("自定義 "); // 名稱需要與B頁統(tǒng)一，否則監(jiān)聽不到
/* 監(jiān)聽來自其他標(biāo)簽頁的消息 */
channel.onmessage = function(event){
console.log( "監(jiān)聽到消息: ", event.data);
};
/* 廣播消息到B標(biāo)簽頁 */
channel.postMessage("你好 B ，收到回復(fù)！");
- 監(jiān)聽消息:
通過為BroadcastChannel實例對象的onmessage屬性分配一個監(jiān)聽事件處理函數(shù)，可以監(jiān)聽來自其他標(biāo)簽頁廣播的消息。當(dāng)監(jiān)聽有消息發(fā)送到該通道時，所有訂閱了該通道的標(biāo)簽頁都會觸發(fā)其對應(yīng)的事件處理函數(shù)，并接收到相同的消息數(shù)據(jù)。
/* 在B標(biāo)簽頁中創(chuàng)建BroadcastChannel實例 */
const channel = new BroadcastChannel("自定義 "); // 名稱需要與A頁統(tǒng)一，否則監(jiān)聽不到
/* 監(jiān)聽來自其他標(biāo)簽頁的消息 */
channel.onmessage = function(event){
console.log("監(jiān)聽到消息: ", event.data);
/* 接收到消息后，給A頁面回文 */
channel.postMessage( "你好A, 消息已收到" );
};
- 發(fā)送消息:
通過調(diào)用BroadcastChannel實例對象的postMessage(message)方法向該通道發(fā)送消息，其中message是要發(fā)送的消息數(shù)據(jù)。該消息(message)將被廣播給所有訂閱了該通道的同域標(biāo)簽頁。
/* 廣播消息到所有同域標(biāo)簽頁 */
channel.postMessage( 'Hello World" );
- 注意：
BroadcastChannel對象只能在同域環(huán)境的瀏覽器里進(jìn)行通訊
