2010年5月24日月曜日

HTML5のpostMessageを使ってみた

HTML内にあるiframeに対してメッセージを送信することができます。
まずはmain.htmlとframe.htmlのサンプルを見てください!

実際の画面はサンプルを見てください。

■サンプル
-main.html

-frame.html


■解説
otherWindow.postMessage(message, targetOrigin);
-otherWindow
別ウィンドウへの参照。次のような参照が保持されます。例えば、iframe 要素のcontentWindow プロパティの利用、window.open によって返されるオブジェクト、あるいは、 window.frames における名前付きか数による添え字。
-message
送信したい文字列データ
-targetOrigin
イベントが伝達されるべき otherWindow の生成元を "*" というリテラル文字列(指定しないことを示します)か URI のいずれかで指定します。もしイベントが targetOrigin で指定されたものにマッチしない otherWindow の文書のスキーマ、ホスト名、あるいは、ポートに伝達するようになっている場合、そのイベントは伝達されません。つまり、3 つすべてがマッチした場合にだけイベントが伝達されます。この仕組みはメッセージが送られる場所の制御を提供します。例えば、postMessage をパスワードを送るために利用する場合、悪意のある第三者によるパスワードの傍受を防ぐためにこの引数が意図されたパスワードを含むメッセージの受け手と同じ生成元である URI であることは絶対的に致命的なものになるでしょう。

ここで、今回はjson形式の物をframeに対して渡しています!
せっかくjson形式で渡しているのですが、postMessageで扱えるのは文字列だけです。
よって、受け取り側でも文字列として受け取ってしまいます。
なので今回は、evalを使い文字列からjson形式に変換しています。

0 件のコメント:

コメントを投稿