中国孕妇变态孕交xxxx,bt天堂在线www

如何用Broadcast Channel API實(shí)現(xiàn)標(biāo)簽頁(yè)通信？

狼影

發(fā)布： 2025-10-14 15:48:01

原創(chuàng)

699人瀏覽過

Broadcast Channel API 是瀏覽器提供的同一源下跨標(biāo)簽頁(yè)通信方案，通過創(chuàng)建同名頻道實(shí)例實(shí)現(xiàn)消息收發(fā)，支持 postMessage 發(fā)送和 onmessage 監(jiān)聽，適用于狀態(tài)同步與操作通知，需注意僅限同源、數(shù)據(jù)可序列化、不保證消息順序，且應(yīng)調(diào)用 close() 釋放資源。

如何用broadcast channel api實(shí)現(xiàn)標(biāo)簽頁(yè)通信？

Broadcast Channel API 是瀏覽器提供的一種輕量級(jí)跨標(biāo)簽頁(yè)通信方式，允許同一源下的不同頁(yè)面實(shí)例之間發(fā)送和接收消息。它使用簡(jiǎn)單，不需要依賴服務(wù)器或復(fù)雜的存儲(chǔ)機(jī)制，適合實(shí)現(xiàn)頁(yè)面間的狀態(tài)同步、用戶操作通知等場(chǎng)景。

創(chuàng)建和使用 BroadcastChannel

要使用 Broadcast Channel API，首先需要?jiǎng)?chuàng)建一個(gè) BroadcastChannel 實(shí)例，傳入一個(gè)通道名稱（字符串），所有使用相同名稱的頻道可以互相通信。

示例代碼：

const channel = new BroadcastChannel('my-channel');

// 發(fā)送消息
channel.postMessage('Hello from tab 1!');

// 接收消息
channel.onmessage = function(event) {
??console.log('收到消息:', event.data);
};

只要多個(gè)標(biāo)簽頁(yè)都連接到名為 'my-channel' 的頻道，它們就能互相收發(fā)消息。

在實(shí)際頁(yè)面中實(shí)現(xiàn)通信

假設(shè)你有兩個(gè)頁(yè)面（或同一個(gè)頁(yè)面打開多個(gè)標(biāo)簽），可以通過以下方式實(shí)現(xiàn)雙向通信：

小羊標(biāo)書

一鍵生成百頁(yè)標(biāo)書，讓投標(biāo)更簡(jiǎn)單高效

查看詳情

每個(gè)頁(yè)面都創(chuàng)建同名的 BroadcastChannel 實(shí)例
綁定 onmessage 事件來(lái)監(jiān)聽消息
調(diào)用 postMessage 發(fā)送數(shù)據(jù)

完整示例：

// page.js
const bc = new BroadcastChannel('chat');

bc.onmessage = (event) => {
??const msg = document.createElement('div');
??msg.textContent = '來(lái)自其他標(biāo)簽: ' + event.data;
??document.body.appendChild(msg);
};

// 點(diǎn)擊按鈕發(fā)送消息
document.getElementById('send').onclick = () => {
??bc.postMessage('我點(diǎn)擊了按鈕！');
};

在另一個(gè)標(biāo)簽頁(yè)中運(yùn)行相同代碼，即可看到消息互通。