广播通道 API

广播通道 API allows basic communication between browsing contexts (that is, windows , tabs , frames ,或 iframes ) and workers on the same origin .

注意: 此特征可用于 Web 工作者 .

By creating a BroadcastChannel object, you can receive any messages that are posted to it. You don't have to maintain a reference to the frames or workers you wish to communicate with: they can “subscribe” to a particular channel by constructing their own BroadcastChannel with the same name, and have bi-directional communication between all of them.

The principle of the Broadcast Channel API

Broadcast Channel interface

Creating or joining a channel

A client joins a broadcast channel by creating a BroadcastChannel object. Its 构造函数 takes one single parameter: the name of the channel. If it is the first to connect to that broadcast channel name, the underlying channel is created.

// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
					

Sending a message

It is enough to call the postMessage() method on the created BroadcastChannel object, which takes any object as an argument. An example string message:

// Example of sending of a very simple message
bc.postMessage('This is a test message.');
					

Any kind of object can be sent, not just a DOMString .

The API doesn't associate any semantics to messages, so it is up to the code to know what kind of messages to expect and what to do with them.

Receiving a message

When a message is posted, a message event is dispatched to each BroadcastChannel object connected to this channel. A function can be run for this event with the onmessage event handler:

// A handler that only logs the event to the console:
bc.onmessage = function (ev) { console.log(ev); }
					

Disconnecting a channel

To leave a channel, call the close() method on the object. This disconnects the object from the underlying channel, allowing garbage collection.

// Disconnect the channel
bc.close();
					

结论

The Broadcast Channel API's self-contained interface allows cross-context communication. It can be used to detect user actions in other tabs within a same origin, like when the user logs in or out.

The messaging protocol is not defined and the different browsing contexts need to implement it themselves; there is no negotiation nor requirement from the specification.

规范

规范 状态 Comment
HTML Living Standard
The definition of 'The Broadcast Channel API' in that specification.
实时标准 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
BroadcastChannel Chrome 54 Edge ≤79 Firefox 38 IE No Opera 41 Safari No WebView Android 54 Chrome Android 54 Firefox Android ? Opera Android 41 Safari iOS No Samsung Internet Android 6.0
BroadcastChannel() 构造函数 Chrome 54 Edge ≤79 Firefox 38 IE No Opera 41 Safari No WebView Android 54 Chrome Android 54 Firefox Android ? Opera Android 41 Safari iOS No Samsung Internet Android 6.0
close Chrome 54 Edge ≤79 Firefox 38 IE No Opera 41 Safari No WebView Android 54 Chrome Android 54 Firefox Android ? Opera Android 41 Safari iOS No Samsung Internet Android 6.0
message event Chrome 54 Edge ≤79 Firefox 38 IE No Opera 41 Safari No WebView Android 54 Chrome Android 54 Firefox Android ? Opera Android 41 Safari iOS No Samsung Internet Android 6.0
messageerror event Chrome 60 Edge ≤79 Firefox 57 IE No Opera 47 Safari No WebView Android 60 Chrome Android 60 Firefox Android ? Opera Android 47 Safari iOS No Samsung Internet Android 8.0
name Chrome 54 Edge ≤79 Firefox 38 IE No Opera 41 Safari No WebView Android 54 Chrome Android 54 Firefox Android ? Opera Android 41 Safari iOS No Samsung Internet Android 6.0
onmessage Chrome 54 Edge ≤79 Firefox 38 IE No Opera 41 Safari No WebView Android 54 Chrome Android 54 Firefox Android ? Opera Android 41 Safari iOS No Samsung Internet Android 6.0
onmessageerror Chrome 60 Edge ≤79 Firefox 57 IE No Opera 47 Safari No WebView Android 60 Chrome Android 60 Firefox Android ? Opera Android 44 Safari iOS No Samsung Internet Android 8.0
postMessage Chrome 54 Edge ≤79 Firefox 38 IE No Opera 41 Safari No WebView Android 54 Chrome Android 54 Firefox Android ? Opera Android 41 Safari iOS No Samsung Internet Android 6.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知

另请参阅