BroadcastChannel: message 事件

基线 2022

新可用

自 2022 年 3 月起，此功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中使用。

注意：此功能在 Web 工作线程中可用。

当 BroadcastChannel 接口上的通道收到消息时，会触发message 事件。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

事件类型

一个 MessageEvent。继承自 Event。

事件属性

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

data 只读: 由消息发射器发送的数据。
origin 只读: 表示消息发射器来源的字符串。
lastEventId 只读: 表示事件唯一 ID 的字符串。
source 只读: 消息事件来源，可以是 WindowProxy、MessagePort 或代表消息发射器的 ServiceWorker 对象。
ports 只读: 表示与消息正在通过的通道关联的端口的 MessagePort 对象数组（在适当的情况下，例如在通道消息传递中或向共享工作线程发送消息时）。

示例

在此示例中，有一个“发送方”<iframe>，它在用户单击按钮时广播 <textarea> 的内容。有两个“接收方”iframe 监听广播消息并将结果写入 <div> 元素。

发送方

<h1>Sender</h1>
<label for="message">Type a message to broadcast:</label><br />
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">Broadcast message</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>Receiver 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>Receiver 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;
});

结果

规范

规范
HTML 标准 # event-message
HTML 标准 # handler-broadcastchannel-onmessage

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

相关事件：messageerror。