HTML5-Praxis und Analyse von dokumentübergreifendem Messaging (Iframe-Messaging)

Das Übertragen von Nachrichten zwischen Seiten verschiedener Domänennamen wird im Allgemeinen als Cross-Document Messaging oder kurz XDM bezeichnet. Beispielsweise kommuniziert eine Seite in der Domäne www.leemagnum.com mit einer Seite im Domänennamen //m.sbmmt.com/, die sich in einem Inline-Frame befindet. Vor dem Aufkommen des XDM-Mechanismus hätte es lange gedauert, diese Art der Kommunikation stressfrei umzusetzen. XDM standardisiert diesen Mechanismus und ermöglicht uns eine sichere und einfache dokumentenübergreifende Kommunikation.

Der Kern von XDM ist die postMessage()-Methode. Bei XDM bezieht sich „ein anderer Ort“ auf das in der aktuellen Seite enthaltene Iframe-Tag oder auf das Fenster, das auf der aktuellen Seite angezeigt wird.

Die postMessage()-Methode empfängt zwei Parameter: eine Nachricht und eine Zeichenfolge, die den Domänennamen angibt, von dem die Nachricht akzeptiert wird. Der zweite Parameter ist sehr wichtig, um eine sichere Kommunikation zu gewährleisten und zu verhindern, dass der Browser Nachrichten an unsichere Orte sendet. Ein kleines Beispiel ist wie folgt

　HTML-Code

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

　 JavaScript-Code

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

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

Die letzte Zeile des JavaScript-Codes versucht, eine Nachricht an den Inline-Frame zu senden und gibt an, dass das Dokument im Frame von „http:/“ stammen muss. /m.sbmmt.com/“-Domäne. Wenn die Quelle übereinstimmt, wird die Nachricht an den Iframe übermittelt, andernfalls führt postMessage() nichts aus. Diese Einschränkung verhindert, dass sich die Position im Fenster in manchen Situationen ändert. Wenn der zweite an postMessage() übergebene Parameter „*“ ist, bedeutet dies, dass die Nachricht an Dokumente aus jeder Domäne gesendet werden kann.

Beim Empfang einer XDM-Nachricht wird das Nachrichtenereignis des Fensterobjekts ausgelöst. Dieses Ereignis wird asynchron ausgelöst, daher kann es zu einer Ereignisverzögerung vom Senden der Nachricht bis zum Empfangen der Nachricht (Auslösen des Nachrichtenereignisses des Empfangsfensters) kommen. Nachdem das Nachrichtenereignis ausgelöst wurde, enthält das an den Onmessage-Handler übergebene Ereignisobjekt die folgenden drei wichtigen Informationen.

　Daten: Die Zeichenfolgendaten, die als erster Parameter der postMessage()-Methode übergeben wurden

origin: Die Domäne des Dokuments, das gesendet wurde die Nachricht, wie zum Beispiel „//m.sbmmt.com/“

　Quelle: der Proxy des Fensterobjekts des Dokuments, das die Nachricht sendet. Dieses Proxy-Objekt wird hauptsächlich zum Aufrufen der postMessage()-Methode in dem Fenster verwendet, das die vorherige Nachricht gesendet hat. Wenn das Fenster, das die Nachricht sendet, von demselben Domänennamen stammt, ist dieses Objekt das Fenster.

Nach Erhalt der Nachricht ist es unbedingt erforderlich, die Quelle des Sendefensters zu überprüfen. Ebenso wie die Angabe eines zweiten Parameters für die postMessage()-Methode, um sicherzustellen, dass der Browser die Nachricht nicht an eine unbekannte Seite sendet, kann durch Überprüfen der Quelle der Nachricht im onmessage()-Methodenhandler sichergestellt werden, dass die eingehende Nachricht von einer bekannten Seite stammt Seite. Das grundlegende Erkennungsmuster lautet wie folgt: Der Proxy, nicht das eigentliche Fensterobjekt. Das heißt, über dieses Ereignis kann auf keine anderen Informationen über das Fensterobjekt zugegriffen werden. Quell-Proxy-Objekt. Die postMessage()-Methode kann nur über den event.Source-Proxy aufgerufen werden.

Es gibt noch eine weitere seltsame Sache an XDM. Zunächst wurde der erste Parameter von postMessage() zunächst als „immer ein String“ implementiert. Später wurde die Definition dieses Parameters jedoch geändert, um die Übergabe beliebiger Datenstrukturen zu ermöglichen. Allerdings haben nicht alle Browser diese Änderung implementiert. Daher ist es sicherheitshalber bei Verwendung der postMessage()-Methode am besten, nur Strings zu übergeben. Wenn Sie strukturierte Daten übergeben möchten, rufen Sie am besten JSON.stringify() für die zu übergebenden Daten auf, übergeben Sie die resultierende Zeichenfolge über die postMessage()-Methode und rufen Sie dann JSON im Onmessage-Ereignishandler .parse auf ()-Methode. Zu den Browsern, die XDM unterstützen, gehören Opera, IE8+, Safari 4+, Firefox 3.5+, Chrome, Webkit für Android und Safari für iOS. Weitere Informationen zu XDM finden Sie auf der offiziellen XDM-Seite. Die offizielle Seite von Achtung auf die chinesische PHP-Website (m.sbmmt.com)!

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);