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

元のアドレス: HTML5 の window.postMessage API
オンライン例: HTML5 の window.postMessage の使用(ログを表示するにはコンソールを開いてください)

I window.postMessage をカプセル化する MooTools プラグイン「PostMessager」を作成しました。ここをクリックしてダウンロードできます。

HTML5 の window.postMessage インターフェイス API を理解している人は多くありません。 window.postMessage を使用すると、複数のウィンドウ/フレーム間でデータと情報をクロスドメイン転送できます。本質的に、window.postMessage はクロスドメイン Ajax リクエストの役割を果たします。もちろん、連携するリモート サーバーは必要ありません。次に、window.postMessage の仕組みと、FireFox、IE8、Opera、Safari、Chrome での使用方法を紹介します。

1. メッセージ送信終了
最初のステップは「ニュースソース」を設定することです。このメッセージ ソースを通じて、ウィンドウ レベルのデータ (メッセージ) を新しく開かれたウィンドウ (または iframe) に送信できます。次の例では、新しいウィンドウにメッセージを送信する頻度は 6 秒に 1 回で、ターゲット ウィンドウから返された応答情報を処理するようにイベント リスニングが設定されています。

コードをコピーします

コードは次のとおりです。

関数トレース(メッセージ){
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 を使用する場合、コードは次のとおりです。

コードをコピーします

コードは次のとおりです。次のように:

// 別のウィンドウも作成します (iframe、frame、frameset、top、window はすべてウィンドウ関連のオブジェクトです)。 var domain = 'http://scriptandstyle.com '; var iframe = document.getElementById('myIFrame').contentWindow;

// もちろん、イベント駆動型メソッドも使用できます。 。 。

setInterval(function(){

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


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


2. メッセージ受信終了

プロセス全体の 2 番目のステップは、ターゲット ウィンドウを準備することです。宛先ウィンドウが行う必要があるのは、メッセージ イベントをリッスンすることだけであり、もちろんイベントの発信元メッセージ ソースを確認することだけです。もう一度注意してください: メッセージ イベント ハンドラーは、任意のドメイン名から送信されたメッセージを受け入れることができるため、送信元を確認し、信頼リストからのメッセージのみを処理することが非常に重要です。



コードをコピー

コードは次のとおりです:

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

上記の例は、リクエスト スクエアに応答メッセージを返信します。 。
message イベントの重要な属性は次のとおりです。
source - メッセージを送信するウィンドウ/iframe オブジェクト
origin - メッセージを送信するウィンドウに対応する URI (プロトコル、ドメイン、およびポートの場合)
data - 特定のデータ情報
これら 3 つのオブジェクトは、メッセージング システムと検証に不可欠です。


window.postMessage の使用に関する注意事項 他のすべての Web テクノロジーと同様に、(イベント ソースを確認せずに) 不適切に使用すると、その危険性が明らかです。もちろん、セキュリティはあなた次第です。
window.postMessage は JavaScript テクノロジの PHP に非常に似ています (笑、広告はほとんどありません!)。window.postMessage は非常に優れたテクノロジだと思いますが、どう思いますか?