-
postMessageメソッドを使用する方法: iframe内のスクリプトから以下のようにpostMessageメソッドを使用して親ウィンドウにメッセージを送信できます。
// iframe内のスクリプト const message = 'Hello, parent window!'; window.parent.postMessage(message, '*');
上記の例では、
message
変数に送信したいメッセージを格納し、window.parent.postMessage
を使用して親ウィンドウにメッセージを送信しています。 -
targetOriginを指定する方法:
window.parent.postMessage
の第2引数にtargetOrigin
を指定することで、特定のドメインにのみメッセージを送信することができます。// iframe内のスクリプト const message = 'Hello, parent window!'; const targetOrigin = 'https://example.com'; window.parent.postMessage(message, targetOrigin);
上記の例では、
targetOrigin
に送信先のドメインを指定しています。これにより、指定したドメイン以外のウィンドウにはメッセージが送信されません。 -
イベントリスナーを使用する方法: 親ウィンドウ側でメッセージを受信するためには、
message
イベントのリスナーを設定する必要があります。// 親ウィンドウのスクリプト window.addEventListener('message', function(event) { // メッセージの受信処理 const message = event.data; console.log('Received message from iframe:', message); });
上記の例では、
message
イベントのリスナーを設定し、受信したメッセージをコンソールに出力しています。
これらの方法を使用することで、iframe内のスクリプトから親ウィンドウにメッセージを送信することができます。必要に応じて、上記のコード例をカスタマイズして使用してください。