HTML5のチャネルメッセージングで実現するブラウジングコンテキスト間の双方向通信

チャネルメッセージングとは

ブラウジングコンテキスト間で双方向の通信を行う仕組みは「チャネルメッセージング」と呼ばれます。この機能は、異なるオリジン（ドメイン）間の通信にも利用できるため、クロスオリジン環境での安全なデータ交換に非常に役立ちます。

MessageChannelの仕組み

MessageChannel を生成すると、内部で自動的に2つのポートが作成されます。片方のポートからデータを送信すると、もう片方のポートを経由して別のブラウジングコンテキストへとデータが転送される仕組みです。

主なメソッド

• postMessage() − チャネルを介してメッセージを送信します
• start() − ポートでのデータ送受信を開始します
• close() − ポートを閉じて通信を終了します

実装例：iframe間でのデータ送信

次のコード例では、ある iframe から別の iframe へデータを送信しています。読み込み完了時にハンドラ関数が呼び出され、MessageChannel の生成、親ウィンドウへのポート転送、メッセージ受信時のアラート表示までを一連の流れとして実装しています。

var loadHandler = function(){
    var mc, portMessageHandler;
    mc = new MessageChannel();
    window.parent.postMessage('documentAHasLoaded','https://foo.example',[mc.port2]);
    portMessageHandler = function(portMsgEvent){
        alert( portMsgEvent.data );
    }
    mc.port1.addEventListener('message', portMessageHandler, false);
    mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

この例では、DOMContentLoaded イベントをトリガーに loadHandler が実行され、port1 側でメッセージリスナーを登録したうえで通信を開始します。一方、port2 は postMessage() の第3引数として配列形式で親ウィンドウへ転送されており、これにより2つのコンテキスト間に独立した通信チャネルが確立されます。