MessagePort: message イベント

Baseline Widely available

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

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

message イベントは MessagePort オブジェクトで、チャンネル上でメッセージが届いたときに発生します。

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

構文

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

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

onmessage = (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.start();
});

リスナーが MessagePort.start() を呼び出さなければ、このポートにメッセージが配信されないことに注意してください。これは、addEventListener() メソッドを使用する場合のみ必要です。受信者が onmessage を使用する場合は、start() が暗黙的に呼び出されます。

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

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