window.postMessage()を利用してクロスドメインメッセージング(JavaScript)を実現する.

説明
window.postMessage()方法は、Windowオブジェクト間のクロスドメイン通信を安全に実現することができる.例えば、一つのページとそれが生成したポップアップウィンドウとの間、またはページとその中に埋め込まれたiframeとの間.
通常、異なるページ上のスクリプトは互いにアクセスすることができ、それらが元のページだけで同じプロトコルを共有する場合、ポート番号とホスト(「ソースポリシー」とも呼ばれる).window.postMessage()はこの制限を安全に回避する制御されたメカニズムを提供しています.
一般的には、別のウィンドウへの参照(例えば、taget Window=window.openerを介して)が得られ、その後、target Window.postMessage()を使用してMessage Eventが送られる.受信ウィンドウは、必要に応じて、このイベントを自分で処理することができる.window.postMessage()に渡すパラメータは、イベントオブジェクトを介して受信ウィンドウに露出します.
送信先
postMessageプログラム

var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
}); 

メッセージ送信の基本文法:

targetWindow.postMessage(message, targetOrigin, [transfer]);

taget Window
target Windowは、メッセージを受信するウィンドウの参照である.参照を得る方法は、

Window.open

Window.opener

HTMLIFrame Element.co ntWindow

Window.parent

Window.frames+インデックス値

メッセージ
メッセージとは、ターゲットウィンドウに送信するメッセージです.データは構造クローニングアルゴリズムを用いて序文化した.これは、私たちが自分で順番に並べなくても、様々なデータオブジェクトを対象ウィンドウに安全に送ることができるという意味です.
ターゲットOrigin
ターゲットウィンドウのソースを指定すると、メッセージ送信先と一致する必要があります.文字列「またはURI」となります.どのターゲットウィンドウでも受信できることを示します.安全のために、必ず受信者のURIを明確にしてください.
トランスファー
トランスファーはオプションパラメータです.
受信側
ターゲットウィンドウは、以下のJavaScriptを実行することにより、送信されたメッセージをリスニングする.

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
}

イベント対象はオリジン、data、sourceの三つの属性があります.event.dataは受信したメッセージを表す.event.origginは、プロトコル、ドメイン名、ポートを含むpostMessageの送信元を表しています.event.sourceはメッセージを送信するウィンドウオブジェクトの参照を表します.この引用を用いて二つの異なるソースのウィンドウ間の双方向通信を確立することができる.
完全プログラム
送信プログラム

    
    



    
        



    window.onload = function() {
        var receiver = document.getElementById('receiver').contentWindow;
        var btn = document.getElementById('send');
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            var val = document.getElementById('text').value;
            receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
        });
    }

受信プログラム

    
    



    Hello World!


    window.onload = function() {
        var messageEle = document.getElementById('message');
        window.addEventListener('message', function (e) {
            alert(e.origin);
            if (e.origin !== "http://www.42du.cn") {
                return;
            }
            messageEle.innerHTML = " "+ e.origin +"    ： " + e.data;
        });
    }

プレゼンテーションアドレス
［ドメイン横断メッセージ転送］(http://www.42du.cn/paper/11)