Window: message イベント

このイベント名を 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(`Received message: ${event.data}`);
});

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

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

• 関連イベント: messageerror
• Window.postMessage()