MessagePort：message 事件

备注： 此特性在 Web Worker 中可用。

当有消息到达该 channel 时，MessagePort 对象上会触发 message 事件。

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

语法

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

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

onmessage = (event) => {};

事件类型

一个 MessageEvent。继承于 Event。

Event MessageEvent

事件属性

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

MessageEvent.data (en-US) 只读

由消息发送者发送的数据。

MessageEvent.origin (en-US) 只读

一个字符串，表示消息发送者的源。

MessageEvent.lastEventId (en-US) 只读

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

MessageEvent.source (en-US) 只读

一个 MessageEventSource（可以是 WindowProxy (en-US)、MessagePort 或 ServiceWorker 对象），表示消息发送者。

MessageEvent.ports (en-US) 只读

一个 MessagePort 对象数组，表示与消息通过的 channel 关联的端口（在适当的情况下，例如在 channel 消息传递或向 shared worker 发送消息时）。

示例

假设脚本创建了一个 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("启动", 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;
  };
});

规范

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

浏览器兼容性

BCD tables only load in the browser

参见