HTML5 の実践とクロスドキュメントメッセージング (iframe メッセージング) の分析

異なるドメイン名のページ間でメッセージを送信することは、一般的にクロスドキュメントメッセージング、略して XDM と呼ばれます。たとえば、ドメイン www.leemagnum.com のページは、インライン フレーム内にあるドメイン名 //m.sbmmt.com/ のページと通信します。 XDM メカニズムが登場する前は、この種の通信をストレスなく実装するには長い時間がかかりました。 XDM はこのメカニズムを標準化し、ドキュメント間の通信を安全かつ簡単に実現できるようにします。

XDMの中核はpostMessage()メソッドです。 XDM の場合、「別の場所」とは、現在のページに含まれる iframe タグ、または現在のページにポップアップ表示されるウィンドウを指します。

postMessage() メソッドは、メッセージと、メッセージの受け入れ元のドメイン名を示す文字列の 2 つのパラメーターを受け取ります。 2 番目のパラメータは、安全な通信を確保し、ブラウザが安全でない場所にメッセージを送信するのを防ぐために非常に重要です。小さな例は次のとおりです

HTMLコード

<iframe id="iframe" src="http://blog.csdn.net/lee_magnum" frameborder="0"></iframe>

JavaScriptコード

//获取框架中的window
var iframeWin = document.getElementById("iframe").contentWindow;
alert(iframeWin) // [object window]

//向框架中发送消息
iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")

JavaScriptコードのコードの最後の行は、インラインフレームにメッセージを送信して定式化しようとしますフレーム内のドキュメントは「//m.sbmmt.com/」ドメインから発信されている必要があります。ソースが一致する場合、メッセージは iframe に配信されます。一致しない場合、postMessage() は何も行いません。この制限により、状況によってはウィンドウ内の位置が変更されなくなります。 postMessage() に渡される 2 番目のパラメータが「*」の場合、メッセージはどのドメインからでもドキュメントに送信できることを意味します。

XDM メッセージを受信すると、ウィンドウ オブジェクトのメッセージ イベントがトリガーされます。このイベントは非同期でトリガーされるため、メッセージの送信からメッセージの受信 (受信ウィンドウのメッセージ イベントのトリガー) までにイベント遅延が発生する可能性があります。 message イベントがトリガーされた後、onmessage ハンドラーに渡されるイベント オブジェクトには、次の 3 つの重要な情報が含まれます。

data: postMessage() メソッドの最初のパラメータとして渡される文字列データ

origin: メッセージを送信するドキュメントが配置されているドメイン (例: "//m.sbmmt.com) /"

source: メッセージを送信するドキュメントのウィンドウ オブジェクトのプロキシ。このプロキシ オブジェクトは主に、前のメッセージを送信したウィンドウで postMessage() メソッドを呼び出すために使用されます。メッセージを送信しているウィンドウが同じドメイン名からのものである場合、このオブジェクトは window です。

メッセージを受信した後、送信ウィンドウのソースを確認することが非常に必要です。 postMessage() メソッドに 2 番目のパラメータを指定して、ブラウザが不明なページにメッセージを送信しないようにするのと同じように、onmessage() メソッド ハンドラでメッセージのソースをチェックすることで、受信メッセージが既知のページからのものであることを確認できます。ページ。基本的な検出モードは以下の通りです

JavaScriptコード

window.addEventListener('message',function(event){
	//确保发送消息的域名是已知的域名
	if(event.origin == "http://blog.csdn.net/lee_magnum"){
		//处理接收到的数据
		processMessage(event.data);
		//可选：向来源窗口发送回执
		event.source.postMessage("收到了", "http://www.leemagnum.com");
	}
}, false);

Event.Sourceは、ほとんどの場合、ウィンドウオブジェクトの単なるプロキシであり、実際のウィンドウオブジェクトではありません。つまり、ウィンドウ オブジェクトに関する他の情報には、このevent.Source プロキシ オブジェクトを通じてアクセスできません。 postMessage() メソッドは、event.Source プロキシを通じてのみ呼び出すことができます。

XDMにはもう一つ奇妙な点があります。まず、postMessage() の最初のパラメータは最初は「常に文字列」として実装されました。ただし、後にこのパラメータの定義が変更され、任意のデータ構造を渡せるようになりました。ただし、すべてのブラウザーがこの変更を実装しているわけではありません。したがって、安全を期すために、postMessage() メソッドを使用するときは、文字列のみを渡すことが最善です。構造化データを渡す場合は、渡されるデータに対して JSON.stringify() を呼び出し、結果の文字列を postMessage() メソッドを通じて渡してから、onmessage イベント ハンドラーで JSON を呼び出すのが最適です。 parse() メソッド。

XDM をサポートするブラウザには、Opera、IE8 以降、Safari 4 以降、Firefox 3.5 以降、Chrome、Webkit for Android、および Safari for iOS が含まれます。 XDM の詳細については、XDM 公式ページを参照してください。 XDMの公式ページは//m.sbmmt.com/

HTML5の実戦やクロスドキュメントメッセージング(iframeでの情報伝達)の解析に関する関連知識が紹介されており、その他の関連コンテンツにも注目してください。 PHP 中国語ネット (m.sbmmt.com) へ!