JavaScript 使用 Broadcast Channel API 達成跨網頁溝通

在 JavaScript 中可以使用 BroadcastChannel 建立廣播頻道來發送廣播,在其他頁面中可以監聽廣播來達成不同的頁面相互溝通。

發送廣播:
    
const broadcastChannel = new BroadcastChannel('channel'); // 頻道名稱為 channel

broadcastChannel.postMessage('Hello!'); // 發送廣播
    

收聽/接收廣播:
    
const broadcastChannel  = new BroadcastChannel('channel'); // 頻道名稱為 channel

// 接收廣播訊息
broadcastChannel.onmessage = (event) => {
    console.log('Message received:', event.data);
};
    

接收廣播也可以使用 addEventListener 的方式:
    
const broadcastChannel  = new BroadcastChannel('channel'); // 頻道名稱為 channel

// 接收廣播訊息
broadcastChannel.addEventListener("message", (event) => {
    console.log('Message received:', event.data);
})
    

關閉廣播:
    
broadcastChannel.close();
    


註: 在 FireFox 的無痕頁面中無法使用。

參考資料:
mdn - Broadcast Channel API

留言