HTML5 ウィンドウ/iframe クロスドメイン メッセージング API の概要_html5 チュートリアルのスキル

関数トレース(メッセージ){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" in window){
console.log(infos); } else {
alert(infos);
}
}// ポップアップウィンドウを作成します
var domain = 'http://scriptandstyle.com'; var myPopup = window.open (domain '/windowPostMessageListener.html','myWindow');
//定期的にメッセージを送信します
setInterval(function(){
var message = '今の時間: ' (new Date().getTime( ));
trace('送信されたメッセージ: ' message);
myPopup.postMessage(message,domain); //データ情報を送信し、ターゲット URI を設定します。 },6*1000 );
function bindingEvent(target,noOnEventName,handler){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler); else if(window) .attachEvent){
// IE のリスニング設定関数はattachEvent
target.attachEvent("on" noOnEventName,handler)
} else {
target["on" noOnEventName]=handler ;
}
};
// 受信した情報を監視します。
bindEvent(window,'message',function(event)) {
// 特定のドメインからのメッセージのみを受信します
if(event.origin !== 'http://scriptandstyle.com') return;
trace('受信した応答情報: ',event.data);


元の記事の著者は、イベントをバインドするために window.addEventListener メソッドを使用していますが、IE ではエラーが報告されます (IE は window.attachEvent です)。もちろん、イベントをラップする関数を作成することもできます。または、MooTools や jQuery/dojo などの既製のクラス ライブラリを使用して実現します。
上記の例では、新しいウィンドウが正常に開いた場合、ウィンドウ オブジェクト参照 myPopup を通じてメッセージを送信し、一致する必要がある URI (プロトコル、ホスト名、ポート番号) を指定できます (ユーザーが子ウィンドウにジャンプした場合)。
同様に、メッセージを受信するイベント ハンドラー関数もバインドしました。複数のフレームを操作するときに混乱しないように、すべての URI によって送信されたメッセージを受信できるため、メッセージ イベントのorigin 属性を確認することが重要であることに注意してください。 発信元を確認した後、このメッセージを処理する方法は、特定のビジネスとニーズによって異なります。

iframe を使用する場合、コードは次のとおりです。

var message = '現在時刻: ' (new Date().getTime());
trace('データ ソース.メッセージ送信: ' message);
iframe.postMessage(message,domain); //データ情報を送信し、ターゲット URI を設定します
},6*1000);


iframe オブジェクトの contentWindow 属性にアクセスできることを確認します—— iframe オブジェクトだけではありません。


2. メッセージ受信終了

// 受信した情報を監視します。
bindEvent(window,'message',function(event) {
// 特定のドメインからのメッセージのみを受信します
if(event.origin !== 'http://davidwalsh.name') return;
trace('リッスンした情報: ',event.data);
//応答メッセージ
イベント.source .postMessage(""こんにちは、メッセージを受け取りました。event.origin);