MessagePort：message 事件

注意：此功能在 Web Workers 中可用。

当某个通道上收到消息时，将在 MessagePort 对象上触发 message 事件。

此事件不可取消，也不冒泡。

语法

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

js
addEventListener("message", (event) => {});

onmessage = (event) => {};

事件类型

一个 MessageEvent。继承自 Event。

Event MessageEvent

事件属性

此接口也继承了其父级 Event 的属性。

MessageEvent.data 只读

消息发送方发送的数据。

MessageEvent.origin 只读

表示消息发送方来源的字符串。

MessageEvent.lastEventId 只读

表示事件唯一 ID 的字符串。

MessageEvent.source 只读

一个 MessageEventSource（可以是 WindowProxy、MessagePort 或 ServiceWorker 对象），表示消息发送方。

MessageEvent.ports 只读

一个 MessagePort 对象数组，表示与正在通过其发送消息的通道关联的端口（在适当情况下，例如在通道消息传递中或向共享工作线程发送消息时）。

示例

假设一个脚本创建了一个 MessageChannel 并将其中一个端口发送到不同的浏览器上下文，例如另一个 <iframe>，使用如下代码

js
const channel = new MessageChannel();
const myPort = channel.port1;
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";

const messageControl = document.querySelector("#message");
const channelMessageButton = document.querySelector("#channel-message");

channelMessageButton.addEventListener("click", () => {
  myPort.postMessage(messageControl.value);
});

targetFrame.postMessage("init", targetOrigin, [channel.port2]);

目标可以接收该端口并开始使用如下代码在其上侦听消息

js
window.addEventListener("message", (event) => {
  const myPort = event.ports[0];

  myPort.addEventListener("message", (event) => {
    received.textContent = event.data;
  });

  myPort.start();
});

请注意，侦听器必须在任何消息传递到此端口之前调用 MessagePort.start()。这仅在使用 addEventListener() 方法时才需要：如果接收方使用 onmessage，则会隐式调用 start()

js
window.addEventListener("message", (event) => {
  const myPort = event.ports[0];

  myPort.onmessage = (event) => {
    received.textContent = event.data;
  };
});

规范

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

浏览器兼容性

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

另请参阅