postMessageとiframeでクロスドメインメッセージを送受信してみる

こんばんは、ころすけ(@wg_koro)です。

通信

2ページ間の通信(片方は別ドメイン)をどうしようかなーと考えていたら、JSONPでもクロスドメインAjax(XmlHttpRequest Lv2)でもない、postMessageなるものを見つけました。IEも、IE8から使えるそうな。結構前からあるのね。全然知らなかった・・・。

window.postMessage – DOM | MDN

window.postMessage は、安全にクロスドメイン通信を可能にするためのメソッドです。通常、異なった複数のページでのスクリプトはそれらが実行されたページが同じプロトコル(たいてい http)、ポート番号(http のデフォルトは 80)、ホスト(両方のページによって同じ値に設定される document.domain を基準とする)である場合に限りお互いにアクセスすることだけが可能です。window.postMessage は正しく使われたときに安全な方法でこの制限を回避するための制御された仕組みを提供します。

触ってみたんですが、これ面白いです。クロスドメインでも簡単に通信が可能。しかも双方向通信もめっちゃ楽。
双方向通信可能

ガジェット系のツールでこれ使うとものすごく楽しいかもw

実際に動かしてみた

親ページはこのブログのドメイン、zafiel.wingall.comに置いてあります。そしてiframeの中はwww.wingall.comに置きました。
デモ1

親ページに入力した文字列を、window.postMessageで簡単にiframeの中に送ることができました。
デモ2

iframeの中から外側のページを操作(この場合はiframeの幅を変える)こともOK。
デモ3

うむ、ものすごく簡単にできた。作ったデモを置いておくので、遊んでみてくださいw

デモ
ソース (GitHub)

注意すべきはプロトコルかな

同じプロトコルでないと使えないようなので、そこだけ気をつければ問題なさそうですね。よし・・・使おうw

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください