BroadcastChannel：message 事件

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

当频道收到一条消息时，会在关联的 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: 0.5rem;
  height: 150px;
  font-family: "Fira Sans", sans-serif;
}

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

textarea {
  padding: 0.2rem;
}

label,
br {
  margin: 0.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: 0.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: 0.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。