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
相关信息
- 相关事件:
messageerror