iframeから親ウィンドウへのポストメッセージの方法


  1. postMessageメソッドを使用する方法: iframe内のスクリプトから以下のようにpostMessageメソッドを使用して親ウィンドウにメッセージを送信できます。

    // iframe内のスクリプト
    const message = 'Hello, parent window!';
    window.parent.postMessage(message, '*');

    上記の例では、message変数に送信したいメッセージを格納し、window.parent.postMessageを使用して親ウィンドウにメッセージを送信しています。

  2. targetOriginを指定する方法: window.parent.postMessageの第2引数にtargetOriginを指定することで、特定のドメインにのみメッセージを送信することができます。

    // iframe内のスクリプト
    const message = 'Hello, parent window!';
    const targetOrigin = 'https://example.com';
    window.parent.postMessage(message, targetOrigin);

    上記の例では、targetOriginに送信先のドメインを指定しています。これにより、指定したドメイン以外のウィンドウにはメッセージが送信されません。

  3. イベントリスナーを使用する方法: 親ウィンドウ側でメッセージを受信するためには、messageイベントのリスナーを設定する必要があります。

    // 親ウィンドウのスクリプト
    window.addEventListener('message', function(event) {
     // メッセージの受信処理
     const message = event.data;
     console.log('Received message from iframe:', message);
    });

    上記の例では、messageイベントのリスナーを設定し、受信したメッセージをコンソールに出力しています。

これらの方法を使用することで、iframe内のスクリプトから親ウィンドウにメッセージを送信することができます。必要に応じて、上記のコード例をカスタマイズして使用してください。