MessagePort: messageerror イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2023年3月⁩.

メモ: この機能はウェブワーカー内で利用可能です。

messageerror イベントは MessagePort オブジェクトで、デシリアライズできないメッセージを受信したときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

イベント型

MessageEvent です。 Event を継承しています。

イベントプロパティ

このインターフェイスは親である Event からプロパティを継承しています。

MessageEvent.data 読取専用: メッセージ送信元によって送信されたデータです。
MessageEvent.origin 読取専用: 文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId 読取専用: 文字列で、このイベントの一意の ID を表します。
MessageEvent.source 読取専用: メッセージイベントソース、すなわち WindowProxy、MessagePort、ServiceWorker の何れかのオブジェクトで、メッセージの送信元を表します。
MessageEvent.ports 読取専用: MessagePort オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

例

MessageChannel を作成し、そのポートの 1 つを別の閲覧コンテキスト（別の <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() が暗黙的に呼び出されます。

window.addEventListener("message", (event) => { const myPort = event.ports[0]; myPort.onmessage = (event) => { received.textContent = event.data; }; myPort.onmessageerror = (event) => { console.error(event.data); }; });