BroadcastChannel:message 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

备注: 此特性在 Web Worker 中可用。

BroadcastChannel 接口的 message 事件在频道收到一条消息时触发。

语法

addEventListener() 等方法中使用事件名称,或设置事件处理器属性。

js
addEventListener("message", (event) => { })
onmessage = (event) => { }

事件类型

事件属性

除了下面列出的属性之外,还可以使用父接口 Event 的属性。

data 只读

由消息发送者发送的数据。

origin 只读

一个表示消息发送者来源的字符串。

lastEventId 只读

一个表示事件唯一 ID 的字符串。

source 只读

一个消息事件源,可以是一个用于表示消息发送者的 WindowProxyMessagePortServiceWorker 对象。

ports 只读

一个与发送消息(通过频道发送消息或向 SharedWorker 发送消息)的频道相关联的 MessagePort 对象的数组。

示例

在这个示例中,有一个 <iframe> 作为发送者,当用户点击按钮之后,会广播 <textarea> 中的内容。同时,有两个 iframe 作为接收者,会监听广播的消息,并将结果写入 <div> 元素。

发送者

js
const channel = new BroadcastChannel("example-channel");
const messageControl = document.querySelector("#message");
const broadcastMessageButton = document.querySelector("#broadcast-message");

broadcastMessageButton.addEventListener("click", () => {
  channel.postMessage(messageControl.value);
});

接收者 1

js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

接收者 2

js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

结果

规范

Specification
HTML
# event-message
HTML
# handler-broadcastchannel-onmessage

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
message event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.

参见