语法
在 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。
js
addEventListener("message", (event) => { })
onmessage = (event) => { }
事件类型
一个 MessageEvent。继承自 Event。
事件属性
除了下面列出的属性之外，还可以使用父接口 Event 的属性。
data只读-
由消息发送者发送的数据。
origin只读-
一个表示消息发送者来源的字符串。
lastEventId只读-
一个表示事件唯一 ID 的字符串。
source只读-
一个消息事件源，可以是一个用于表示消息发送者的 WindowProxy、
MessagePort或ServiceWorker对象。 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;
});
结果
规范
| 规范 |
|---|
| HTML # event-message |
| HTML # handler-broadcastchannel-onmessage |
浏览器兼容性
参见
- 相关事件：
messageerror。