【JavaScript】window.postMessage() の使い方

window.postMessage()とは

window.postMessage() は、異なるオリジン間で安全にメッセージを送受信するためのメソッドです。このメソッドを使用することで、異なるドメイン、プロトコル、ポートを持つウィンドウやフレーム間でデータをやり取りすることができます。

使い方

メッセージの送信

postMessage() メソッドは、以下のように使用します。

// 送信先のウィンドウを取得
const targetWindow = window.open('https://sample.com', '_blank')

// 送信するメッセージ
const message = { type: 'greeting', text: 'Hello from parent!' };

// メッセージを送信
targetWindow.postMessage(message, 'https://example.com');

• 第一引数: 送信するメッセージ（オブジェクトや文字列）
• 第二引数: 受信側のオリジン（URL）。（このオリジンに一致する場合のみメッセージが受信されます）

メッセージの受信

受信側では、message イベントをリッスンしてメッセージを受け取ります。

window.addEventListener('message', (event) => {
    // 受信したメッセージのオリジンを必ず確認する
    if (event.origin !== 'https://example.com') {
        return; // 不正なオリジンからのメッセージを無視
    }

    // メッセージを処理
    console.log('Received message:', event.data);
});

• event.origin: メッセージを送信したウィンドウのオリジン（これを確認することで、信頼できるソースからのメッセージかどうかを判断できます）