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