MessagePort: messageerror 事件

基线 2023

新可用

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

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

当 MessagePort 对象收到无法反序列化的消息时，会触发 messageerror 事件。

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

语法

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

addEventListener("messageerror", (event) => {});

onmessageerror = (event) => {};

事件类型

一个 MessageEvent。继承自 Event。

事件属性

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

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

示例

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

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]);

目标可以接收该端口并开始监听其上的消息和消息错误，使用如下代码

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

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

  myPort.addEventListener("messageerror", (event) => {
    console.error(event.data);
  });

  myPort.start();
});

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

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

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

  myPort.onmessageerror = (event) => {
    console.error(event.data);
  };
});

规范

规范
HTML 标准 # event-messageerror
HTML 标准 # handler-messageport-onmessageerror

浏览器兼容性

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

另请参阅

相关事件：message。
使用通道消息传递