Window: message イベント

messageWindow オブジェクトのイベントで、ウィンドウが例えば他の閲覧コンテキストからの Window.postMessage() の呼び出しによってメッセージを受け取った時に発生します。

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

構文

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

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

onmessage = (event) => {};

イベント型

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

Event MessageEvent

イベントプロパティ

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

MessageEvent.data 読取専用

メッセージ送信元によって送信されたデータです。

MessageEvent.origin 読取専用

文字列で、メッセージ送信元のオリジンを表します。

MessageEvent.lastEventId 読取専用

文字列で、このイベントの一意の ID を表します。

MessageEvent.source 読取専用

MessageEventSourceWindowProxyMessagePortServiceWorker の何れかのオブジェクト)で、メッセージの送信元を表します。

MessageEvent.ports 読取専用

MessagePort オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します(チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合)。

あるスクリプトが、次のようなコードを使用して、別の <iframe> のような異なる閲覧コンテキストにメッセージを送信するとします。

js
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const windowMessageButton = document.querySelector("#window-message");

windowMessageButton.addEventListener("click", () => {
  targetFrame.postMessage("hello there", targetOrigin);
});

受信側は、以下のようなコードで addEventListener() を使用し、メッセージを待ち受けることができます。

js
window.addEventListener("message", (event) => {
  console.log(`Received message: ${event.data}`);
});

他にも、リスナーは onmessage イベントハンドラープロパティを使用することもできます。

js
window.onmessage = (event) => {
  console.log(`Received message: ${event.data}`);
};

仕様書

Specification
HTML Standard
# event-message
HTML Standard
# handler-window-onmessage

ブラウザーの互換性

BCD tables only load in the browser

関連情報