MessagePort: messageerror event
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.
Note: This feature is available in Web Workers.
The messageerror
event is fired on a MessagePort
object when it receives a message that can't be deserialized.
This event is not cancellable and does not bubble.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("messageerror", (event) => {});
onmessageerror = (event) => {};
Event type
A MessageEvent
. Inherits from Event
.
Event properties
This interface also inherits properties from its parent, Event
.
MessageEvent.data
Read only-
The data sent by the message emitter.
MessageEvent.origin
Read only-
A string representing the origin of the message emitter.
MessageEvent.lastEventId
Read only-
A string representing a unique ID for the event.
MessageEvent.source
Read only-
A
MessageEventSource
(which can be a WindowProxy,MessagePort
, orServiceWorker
object) representing the message emitter. MessageEvent.ports
Read only-
An array containing all
MessagePort
objects sent with the message, in order.
Examples
Suppose a script creates a MessageChannel
and sends one of the ports to a different browsing context, such as another <iframe>
, using code like this:
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]);
The target can receive the port and start listening for messages and message errors on it using code like this:
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();
});
Note that the listener must call MessagePort.start()
before any messages will be delivered to this port. This is only needed when using the addEventListener()
method: if the receiver uses onmessage
instead, start()
is called implicitly:
window.addEventListener("message", (event) => {
const myPort = event.ports[0];
myPort.onmessage = (event) => {
received.textContent = event.data;
};
myPort.onmessageerror = (event) => {
console.error(event.data);
};
});
Specifications
Specification |
---|
HTML Standard # event-messageerror |
HTML Standard # handler-messageport-onmessageerror |
Browser compatibility
BCD tables only load in the browser
See also
- Related events:
message
. - Using channel messaging