Window: message イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年8月以降、すべてのブラウザーで利用可能です。
message は Window オブジェクトのイベントで、ウィンドウが例えば他の閲覧コンテキストからの window.postMessage() の呼び出しによってメッセージを受け取った時に発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("message", (event) => { })
onmessage = (event) => { }
イベント型
MessageEvent です。 Event を継承しています。
イベントプロパティ
このインターフェイスは親である Event からプロパティを継承しています。
MessageEvent.data読取専用-
メッセージ送信元によって送信されたデータです。
MessageEvent.origin読取専用-
文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId読取専用-
文字列で、このイベントの一意の ID を表します。
MessageEvent.source読取専用-
MessageEventSource（WindowProxy、MessagePort、ServiceWorkerの何れかのオブジェクト）で、メッセージの送信元を表します。 MessageEvent.ports読取専用-
MessagePortオブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。
例
あるスクリプトが、次のようなコードを使用して、別の <iframe> のような異なる閲覧コンテキストにメッセージを送信するとします。
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() を使用し、メッセージを待ち受けることができます。
window.addEventListener("message", (event) => {
console.log(`受信したメッセージ: ${event.data}`);
});
他にも、リスナーは onmessage イベントハンドラープロパティを使用することもできます。
window.onmessage = (event) => {
console.log(`受信したメッセージ: ${event.data}`);
};
仕様書
| 仕様書 |
|---|
| HTML # event-message |
| HTML # handler-window-onmessage |
ブラウザーの互換性
関連情報
- 関連イベント:
messageerror Window.postMessage().