[javascript HTML5] Q. Web Messageingとは?

A.
HTML5では Web Messageing APIが追加されました。
Web Messageingは、大きく分けてクロスドキュメントメッセージングと
チャンネルメッセージングで分けられています。
どちらも異なるオリジン間において
メッセージ通信が行うことができます。

Web Messageingの仕組みやMessageEventオブジェクトは
Web sockets,WebWorkersやServerSentEventでも利用されており
HTML5周辺技術を学ぶ際にはWeb Messageing APIの理解が役に
立ちますのでしっかりと学習する必要があります。

ここで親window(ドメイン:dev.yoshimax.net)内で読み込んだ
iframe (メイン:sandbox.yoshimax.net)にメッセージを送信し、
iframeから親windowにメッセージの返信を行ってみます。

メッセージを送信するには
window.postMessage(message,origin,port);
メッセージを受信するには
window.addEventListener("message", receiver, false);
の書式で行います。
ここで実際のソースコードを確認してみましょう。
親のHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {

  // クリックをしたらfirstFrameにメッセージを送信します。
  var firstBtn = document.getElementById("sendFirstBtn");
  firstBtn.addEventListener("click", function(){
    var fristFrame = document.getElementById("firstFrame");
    firstFrame.postMessage("[from Parent]message","http://sandbox.yoshimax.net");
  }, false);

  // firstFrameからメッセージを受信します。
  window.addEventListener("message", function(e){
    console.log("parent message-----");
    console.log(e);
    if(e.origin == "http://sandbox.yoshimax.net"){
      console.log("parent:" + e.data);
    }
  }, false);

}, false);
</script>
</head>
<body>
<div id="sendFirstBtn" style="border: 1px solid #F00; width:200px;">send message firstF\
rame</div>
<iframe id="firstFrame" width="200" src="http://sandbox.yoshimax.net/tmp/testcode/9-1.html\
"></iframe>
</body>
</html>
iframeのHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>firstIframe</title>
<script type="text/javascript">
window.addEventListener("message", function(e) {
  console.log("firstframe message-----")
  console.log(e);

  // 受信するドメインを指定する
  if(e.origin == "http://dev.yoshimax.net"){
    // 受信したデータを表示する
    console.log("firstFrame:" + e.data);

    // 親ウインドウにメッセージを送信する
    e.source.postMessage("[from:firstFrame]" + e.data , e.origin);
  }

}, false);
</script>
</head>
<body>
firstIframe
</body>
</html>
実行結果
js_message_1.png

messageのイベントで送られてきたイベントの構造は
HTML5 Web Messaging の 2 Event definitionsで定義されており
このイベントのインターフェースは server-sent events, Web socketsでも
利用されているのでしっかりと把握しよう。

originを適切なドメインにしなかった場合
js_message_2.png

originのドメインの指定が適切ではない場合上記のようなエラーが発生する

参考サイト:
W3C HTML5 Web Messaging
MDN window.postMessage