別タブやiframeで呼び出したページとの間で安全に情報を共有する方法として、PostMessageを使った方法があります。
かつては親windowからiframeや別タブの要素の情報を取得することが可能な時代もありましたが、今はセキュリティの問題からできません。
そこでwindow間で安全に情報を共有する方法として誕生したのがPostMessageです。
PostMessageでは呼び出す側、呼び出される側でルールを決めておいて、そのルールに則って情報を共有して処理を行うことになります。
この機能が使われている代表的なものとしては、埋め込み型のYouTubeがあります。
https://developers.google.com/youtube/iframe_api_reference?hl=ja
今回はその方法をご紹介いたします。
↓つくってみたもの
DEMO
メッセージを送る
親windowから子windowへメッセージを送る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 別タブの場合 var tab = window.open('example.html'); tab.postMessage({ action: 'SyncMessage', message: 'Hello' }, '*', ); // iframeの場合 var iframe = document.querySelector('.iframe'); iframe.postMessage({ action: 'SyncMessage', message: 'Hello' }, '*', ); |
子windowから親windowへメッセージを送る
|
1 2 3 4 5 6 7 8 9 10 11 | // 別タブの場合 window.opener.postMessage({ action: 'SyncMessage', message: 'Hello' }, '*', ); // iframeの場合 document.referrer.postMessage({ action: 'SyncMessage', message: 'Hello!' }, '*', ); |
メッセージを受け取る
|
1 2 3 4 5 6 7 8 9 | window.addEventListener('message', function (e) { if (event.origin !== "https://example.com") //送信元のドメインが明確な場合は、チェックすることが強く推奨されています return; switch (e.data.action) { case 'SyncMessage': messageInput.value = e.data.message; break; } }); |
メッセージを受け取る側では、windowを指定することができないため、
予め送受信するオブジェクトにactionを設定するなどルールを決めておくのが良いと思います。
[2022.2.3追記]
メッセージを受け取るときに送信元のwindowのドメインが明確な場合は、チェックすることが強く推奨されていましたので、
その表記を追加いたしました。（以下の箇所）
|
1 2 | if (event.origin !== "https://example.com") return; |
参考にさせていただいたサイト
window.postMessage – Web API | MDN
document.referrerでiframeからクロスドメインの親ページのURLを取得できる理由について – yn2011’s blog
