BroadcastChannel: message event

当频道收到一条消息时,会在关联的 BroadcastChannel 对象上触发 message 事件。

Bubbles No
Cancelable No
Interface MessageEvent
Event handler property onmessage

示例

实时示例

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

发送者

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

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

接收者 2

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

结果

规范

规范 状态
HTML Living Standard Living Standard

浏览器兼容性

BCD tables only load in the browser

相关信息