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,实现它的接口。