BroadcastChannel：message 事件

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

语法

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

addEventListener('message', (event) => { })
onmessage = (event) => { }

事件类型

一个 MessageEvent。继承自 Event。

事件属性

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

data (en-US) 只读: 由消息发送者发送的数据。
origin (en-US) 只读: 一个表示消息发送者来源的字符串。
lastEventId (en-US) 只读: 一个表示事件唯一 ID 的字符串。
source (en-US) 只读: 一个消息事件源，可以是一个用于表示消息发送者的 WindowProxy (en-US)、MessagePort 或 ServiceWorker 对象。
ports (en-US) 只读: 一个与发送消息（通过频道发送消息或向 SharedWorker 发送消息）的频道相关联的 MessagePort 对象的数组。

示例

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

发送者

<h1>发送者</h1>
<label for="message">请输入要广播的信息：</label><br/>
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">广播信息</button>

body {
     border: 1px solid black;
     padding: .5rem;
     height: 150px;
     font-family: "Fira Sans", sans-serif;
}

h1 {
    font: 1.6em "Fira Sans", sans-serif;
    margin-bottom: 1rem;
}

textarea {
    padding: .2rem;
}

label, br {
    margin: .5rem 0;
}

button {
    vertical-align: top;
    height: 1.5rem;
}

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

<h1>接收者 1</h1>
<div id="received"></div>

body {
    border: 1px solid black;
    padding: .5rem;
    height: 100px;
    font-family: "Fira Sans", sans-serif;
}

h1 {
    font: 1.6em "Fira Sans",
    sans-serif; margin-bottom: 1rem;
}

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

接收者 2

<h1>接收者 2</h1>
<div id="received"></div>

body {
    border: 1px solid black;
    padding: .5rem;
    height: 100px;
    font-family: "Fira Sans", sans-serif;
}

h1 {
    font: 1.6em "Fira Sans", sans-serif;
    margin-bottom: 1rem;
}

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

结果

规范

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

浏览器兼容性

BCD tables only load in the browser

参见

相关事件：messageerror。