2011/07/15

[JavaScript]postMessage その1

HTML5の新機能であるpostMessageを試しました。

postMessageとは、詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編にも書かれていますが、ドメインが違うiframeにもメッセージを送信したり受信したりする機能です。

今回は、親から子供のiframeにメッセージを送信する方法を書きたいと思います。

まずは、親のページ

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" >
</script>
<script>
function clicked(){
  window.frames[0].postMessage("hello world","A");
}
</script>
</head>
<body>
  <iframe src="A"></iframe>
  <input type="button" value="Run" onclick="clicked();">
</body>
</html>

iframe(子供)のページは↓
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" >
</script>
<script>
$(window).bind("message",function(ev){
 console.log(ev)
 console.log("メッセージを受信しました")
 console.log("Yes!!")
})
</script>

postMessageメソッドを使うことで、iframe側にメッセージを送信することができます。

postMessageメソッドの第二引数は、iframe側のドメインを設定します。
子供のiframe側には、windowオブジェクトにmessagenハンドラをバインドさせることで、メッセージをキャッチすることができます。

jQueryでbindをさせた場合、ev.originalEventの中にあるoriginプロパティーでドメインを読み取ることができて、同様にdataプロパティーで送信されたデータをキャッチすることができます。

ちなみに、送信できるメッセージは文字列のみのようです。

IEは8以降から対応しているそうなのですが、便利な機能だと思います。
(試したのは、chrome)

時刻: 13:54
ラベル:

0 コメント:

コメントを投稿

登録: コメントの投稿 (Atom)