LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

【JavaScript】PostMessageを使ったクロスドメインでのデータ通信

テクニック

【JavaScript】PostMessageを使ったクロスドメインでのデータ通信

別タブやiframeで呼び出したページとの間で安全に情報を共有する方法として、PostMessageを使った方法があります。

かつては親windowからiframeや別タブの要素の情報を取得することが可能な時代もありましたが、今はセキュリティの問題からできません。
そこでwindow間で安全に情報を共有する方法として誕生したのがPostMessageです。

PostMessageでは呼び出す側、呼び出される側でルールを決めておいて、そのルールに則って情報を共有して処理を行うことになります。
この機能が使われている代表的なものとしては、埋め込み型のYouTubeがあります。
https://developers.google.com/youtube/iframe_api_reference?hl=ja

今回はその方法をご紹介いたします。

↓つくってみたもの
DEMO

メッセージを送る

親windowから子windowへメッセージを送る

子windowから親windowへメッセージを送る

メッセージを受け取る

メッセージを受け取る側では、windowを指定することができないため、
予め送受信するオブジェクトにactionを設定するなどルールを決めておくのが良いと思います。

参考にさせていただいたサイト

window.postMessage – Web API | MDN

document.referrerでiframeからクロスドメインの親ページのURLを取得できる理由について – yn2011’s blog

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。