Broadcast Channel API
注意:此功能在 Web Workers 中可用。
Broadcast Channel API 允許在同一 源上的 瀏覽上下文(即 視窗、標籤頁、框架 或 iframe)與 worker 之間進行基本通訊。
注意: 確切地說,通訊允許在使用相同 儲存分割槽的瀏覽上下文之間進行。儲存首先根據頂級站點進行分割槽——因此,例如,如果您有一個在 a.com 上開啟的頁面,其中嵌入了一個來自 b.com 的 iframe,而另一個頁面開啟到 b.com,則該 iframe 無法與第二個頁面通訊,儘管它們在技術上是同源的。但是,如果第一個頁面也在 b.com 上,則 iframe 可以與第二個頁面通訊。
透過建立 BroadcastChannel 物件,您可以接收發布到該物件的任何訊息。您不必維護與您希望通訊的幀或 worker 的引用:它們可以透過使用相同的名稱構造自己的 BroadcastChannel 來“訂閱”特定的頻道,並在它們之間實現雙向通訊。

Broadcast Channel 介面
建立或加入頻道
客戶端透過建立 BroadcastChannel 物件來加入廣播頻道。其 建構函式接受一個引數:頻道的 名稱。如果它是第一個連線到該廣播頻道名稱的客戶端,則會建立底層頻道。
// Connection to a broadcast channel
const bc = new BroadcastChannel("test_channel");
傳送訊息
在建立的 BroadcastChannel 物件上呼叫 postMessage() 方法就足夠了,該方法接受任何物件作為引數。例如字串訊息
// Example of sending of a very simple message
bc.postMessage("This is a test message.");
傳送到頻道的資料使用 結構化克隆演算法進行序列化。這意味著您可以安全地傳送各種資料物件,而無需自己進行序列化。
API 不會為訊息關聯任何語義,因此程式碼需要知道要接收哪種訊息以及如何處理它們。
接收訊息
當釋出訊息時,會向連線到該頻道的每個 BroadcastChannel 物件分派一個 message 事件。可以使用 onmessage 事件處理程式為該事件執行一個函式。
// A handler that only logs the event to the console:
bc.onmessage = (event) => {
console.log(event);
};
斷開頻道連線
要離開頻道,請在該物件上呼叫 close() 方法。這會將物件與底層頻道斷開連線,允許垃圾回收。
// Disconnect the channel
bc.close();
總結
Broadcast Channel API 的自包含介面允許跨上下文通訊。它可以用來檢測同一源下其他標籤頁中的使用者操作,例如使用者登入或登出。
訊息協議未定義,不同的瀏覽上下文需要自己實現;規範中沒有協商或要求。
介面
規範
| 規範 |
|---|
| HTML # broadcasting-to-other-browsing-contexts |
瀏覽器相容性
載入中…
另見
BroadcastChannel,實現它的介面。