一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

Web Messaging機能を試してみた

今回はHTML5で新たに追加された機能「Web Messaging」を試してみました。

この機能は簡単にいうと、「ドメインの異なる複数のページ間でメッセージをやり取りできる機能」です。
従来、セキュリティの問題上、実現できなかったやり取りを実現する機能になります。


今回はweb_messaging.html(メイン), web_messaging_for_iframe.html(iframe用)の2種類を用意してそれらの間でやり取りをためしてみました。


動きとしては、
メインからiframe側へメッセージ送信
        ↓
iframe側でメッセージを受け取り、受信した旨を今度はメイン側に送信
        ↓
メイン側のiframeが更新され、受信した旨をアラート


って感じです。


あ、ちなみに今回はただのお試しなので、ドメインMAMPlocalhost:8888としました。。


それではそれぞれのコードのほうを。

<!-- web_messaging.html -->

<html>
<head> 
  <meta charset="utf-8">
  <title>WebMessaging Sample</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
$(document).ready(function() {
 
  $('#start').on('click', function(event) {
    var iframe = document.getElementById('iframe');
    iframe.contentWindow.postMessage($('#name').val(), 'http://localhost:8888');
  });
 window.addEventListener("message", function(event){
    alert(event.data);
  })
});
  </script>
</head>
<body>
  <form>
    <p>iframeにメッセージを送ってください</p>
    <input id="name" name="name"/>
    <input id="start" name="start" type="button" value="send"/>
  </form>
  <iframe src="webmessaginginternal.html" id="iframe" width="300px" height="200px"/>

</body>  
</html>
<!-- web_messaging_for_iframe.html -->
<html>
<head>
  <meta charset="utf-8">
  <title>WebMessaging Sample</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
  <script type="text/javascript">
  
  $(document).ready(function(){
    window.addEventListener('message', function(event) {
    $('#receive').text($('#receiveMsg').render(event));
    event.source.postMessage($('#replyMsg').render(event), 'http://localhost:8888');
  });
  })
  </script>
  <script id="receiveMsg" type="text/x-jsrender">送ったメッセージは「 {{:data}}」です  </script>
  <script id="replyMsg" type="text/x-jsrender">メッセージ「{{:data}}」を確認しました</script>
</head>
<body>
  <p>iframeの内容ですよー</p>
  <div id="receive"></div>

</body>
</html>


では順番に見ていきます!

まず、メインの方、、っとその前に注釈!!

僕はいつもJSはbodyタグの直前に書くことが多いのですが、今回はあえてheadタグに書いて、ready関数の中に処理を記述しています。
これには理由があって、今回はコンテンツ内にiframeを使っており、このiframeタグ はscriptタグよりも後に読み込まれるっぽいので、body閉じタグの直前にJSを書いても上手く動かなかったのですね。。

こんな記事を書かれている方がいらっしゃったので、たぶんそうなんだと勝手に解釈しています。
http://kawa.at.webry.info/200911/article_7.html


もし僕の解釈が間違ってたら教えてください…


では中の処理を見ていきます。

まずは送信ボタンをクリックした時の処理ですが、ボタンを押すとiframe部分をgetElementByIdで取得します。んで、iframen側のウインドウに対して、postMessageメソッドでデータを送信します(postMessageメソッドは第一引数に送信するデータ、第二引数に送信先のドメインを指定します)。
また、iframeのウインドウはiframe.contentWindowで取得できるみたいなのでそうしました。
                   ↓iframe側へ
メッセージを受け取った際に発生するイベントはmessageイベントになります。これに対して、コールバック処理を書いていきます。
で、その処理内容としては、
jsRenderを使って受け取ったデータの内容をiframe側に表示させる処理と、これまたjsRenderで受信確認メッセージをメイン側に送り返す処理になります。
ここでiメイン側のウインドウはevent.sourceで参照しています。
                   ↓メイン側へ
メイン側でメッセージイベントが発生した際にアラートが出るようにしてあるので、受信確認メッセージがアラートされれば、一連のメッセージのやり取りがこれにて完結します。


今回は、web messagingの機能を試せた上に、その過程でiframeやimgの読み込み順に関する素晴らしい記事も発見したので、いろいろ勉強にできてよかったです。

ブラウザのレンダリングの仕組みなど、もっとつっこんで勉強していく必要があると痛感しました。
できるだけWEB上から不快感を無くしたいですもんね!!

がんばろー

小さなことからコツコツと。