MessagePort:messageerror 事件

Baseline 2023
Newly available

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

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

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

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

语法

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

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

onmessageerror = (event) => {};

事件类型

事件属性

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

MessageEvent.data 只读

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

MessageEvent.origin 只读

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

MessageEvent.lastEventId 只读

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

MessageEvent.source 只读

一个 MessageEventSource(可以是 WindowProxyMessagePortServiceWorker 对象),表示消息发送者。

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("启动", targetOrigin, [channel.port2]);

目标可以接收端口并开始监听消息和消息错误,代码如下:

js
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() 方法:

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

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

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

规范

Specification
HTML
# event-messageerror
HTML
# handler-messageport-onmessageerror

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
messageerror event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

参见