此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

MessagePort:messageerror 事件

基线
广泛可用

自 2023年3月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

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

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

语法

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

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

onmessageerror = (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("启动", 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);
  };
});

规范

规范
HTML
# event-messageerror
HTML
# handler-messageeventtarget-onmessageerror

浏览器兼容性

参见