Einführung in die domänenübergreifende Messaging-API für HTML5-Fenster/Iframe_HTML5-Tutorialfähigkeiten

Ursprüngliche Adresse: HTML5‘s window.postMessage API
Online-Beispiel: Verwendung von HTML5‘s window.postMessage(Bitte öffnen Sie die Konsole, um das Protokoll anzuzeigen)

I hat ein MooTools-Plugin „PostMessager“ geschrieben, um window.postMessage zu kapseln. Sie können hier klicken, um es herunterzuladen.

Nicht viele Leute verstehen die window.postMessage-Schnittstellen-API von HTML5. window.postMessage ermöglicht die domänenübergreifende Übertragung von Daten und Informationen zwischen mehreren Fenstern/Frames. Im Wesentlichen spielt window.postMessage die Rolle einer domänenübergreifenden Ajax-Anfrage. Für die Zusammenarbeit ist natürlich kein Remote-Server erforderlich. Als nächstes stellen wir vor, wie window.postMessage funktioniert und wie man es in Firefox, IE8, Opera, Safari und Chrome verwendet.

1. Ende des Nachrichtenversands
Der gesamte Prozess Der erste Schritt besteht darin, eine „Nachrichtenquelle“ einzurichten. Über diese Nachrichtenquelle können wir Daten (Nachricht) auf Fensterebene an das neu geöffnete Fenster (oder den Iframe) senden. Im folgenden Beispiel beträgt die Häufigkeit, mit der Nachrichten an das neue Fenster gesendet werden, einmal alle 6 Sekunden, und die Ereignisüberwachung ist so eingerichtet, dass sie die vom Zielfenster zurückgegebenen Antwortinformationen verarbeitet.

Code kopieren

Der Code lautet wie folgt:

Funktionsverfolgung (Nachricht){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" in window){
console.log(infos);
} else {
alert(infos);
}
// Erstelle ein Popup-Fenster
var domain = 'http://scriptandstyle.com'; var myPopup = window.open (domain '/windowPostMessageListener.html','myWindow');
//Nachrichten regelmäßig senden
setInterval(function(){
var message = 'Jetzt Zeit: ' (neu Date().getTime( ));
trace('Datenquelle. Nachricht gesendet: '
myPopup.postMessage(message,domain); //Dateninformationen senden und Ziel-URI festlegen
},6*1000 );
function bindEvent(target,noOnEventName,handler){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler)); .attachEvent){
// Die Listening-Einstellungsfunktion von IE ist attachmentEvent
target.attachEvent("on" noOnEventName,handler); else {
target["on" noOnEventName]=handler ;
}
// Überwachen Sie die empfangenen Informationen
bindEvent(window,'message',function(event) {
// Empfangen Sie nur Nachrichten von einer bestimmten Domäne
if(event.origin !== 'http://scriptandstyle.com') return;
trace('Antwortinformationen erhalten: ',event.data},false); 🎜>
Der Autor des Originalartikels verwendet die Methode window.addEventListener, um Ereignisse zu binden, aber unter IE wird ein Fehler gemeldet (IE ist window.attachEvent). Natürlich können Sie eine Funktion zum Umschließen des Ereignisses erstellen. oder verwenden Sie eine vorgefertigte Klassenbibliothek wie MooTools oder jQuery/dojo, um dies zu erreichen.
Wenn sich im obigen Beispiel das neue Fenster normal öffnet, können wir eine Nachricht über die Fensterobjektreferenz myPopup senden und den URI (Protokoll, Hostname, Portnummer) angeben, der übereinstimmen muss (wenn der Benutzer in das untergeordnete Fenster springt). Fenster zu anderen Seiten, die Nachricht wird nicht gesendet).
In ähnlicher Weise haben wir auch die Event-Handler-Funktion an den Empfang der Nachricht gebunden. Zur Erinnerung: Es ist wichtig, das Ursprungsattribut des Nachrichtenereignisses zu überprüfen, da Nachrichten, die von allen URIs an Sie gesendet werden, empfangen werden können, sodass Sie bei der Interaktion mit mehreren Frames nicht verwirrt werden. Nach der Überprüfung des Ursprungs hängt der Umgang mit dieser Nachricht von Ihrem spezifischen Unternehmen und Ihren Anforderungen ab.

Wenn Sie iframe verwenden, lautet der Code wie folgt:

Kopieren Sie den Code


Der Code lautet wie folgt:

// Erstellen Sie außerdem ein weiteres Fenster (iframe, Frame, Frameset, Top, Window sind alles fensterbezogene Objekte.) var domain = 'http://scriptandstyle.com '; var iframe = document.getElementById('myIFrame').contentWindow; / Natürlich können auch ereignisgesteuerte Methoden verwendet werden. . . setInterval(function(){

var message = 'Aktuelle Zeit: ' (new Date().getTime());

trace('Data source.Message sent: ' message);

iframe.postMessage(message,domain); //Dateninformationen senden und Ziel-URI festlegen
},6*1000);


Stellen Sie sicher, dass Sie auf das contentWindow-Attribut des iframe-Objekts zugreifen können —— Und nicht nur das Iframe-Objekt.


2. Ende des Nachrichtenempfangs

Der zweite Schritt des gesamten Prozesses besteht darin, das Zielfenster vorzubereiten. Das Zielfenster muss lediglich das Nachrichtenereignis abhören und natürlich die Ursprungsnachrichtenquelle des Ereignisses überprüfen. Nochmals zur Erinnerung: Der Nachrichtenereignishandler kann Nachrichten akzeptieren, die von jedem Domänennamen an ihn gesendet werden. Daher ist es sehr wichtig, den Ursprung zu überprüfen und nur Nachrichten aus der Vertrauensliste zu verarbeiten.

Code kopieren

Der Code lautet wie folgt:

// Überwachen Sie die empfangenen Informationen
bindEvent(window,'message',function(event) {
// Empfangen Sie nur Nachrichten von bestimmten Domänen
if(event.origin !== 'http://davidwalsh.name') return;
trace('Listened to information: ',event.data);
//Antwortnachricht
event .source .postMessage(""Hallo Freunde, ich habe die Nachricht erhalten, event.origin);
},false);

Das obige Beispiel antwortet auf die Antwortnachricht auf das Anfragefeld . Die wichtigen Attribute des
message-Ereignisses sind:
Quelle – das Fenster/Iframe-Objekt, das die Nachricht sendet
Ursprung – der URI, der dem Fenster entspricht, das die Nachricht sendet (Protokoll, Domäne und Port, falls angegeben)
Daten – spezifische Dateninformationen
Diese drei Objekte sind für das Nachrichtensystem und die Überprüfung von wesentlicher Bedeutung.

Hinweise zur Verwendung von window.postMessage
Wie bei allen anderen Webtechnologien liegen die Gefahren bei unsachgemäßer Verwendung (ohne Überprüfung der Ereignisquelle) auf der Hand. Die Sicherheit liegt natürlich bei Ihnen.
window.postMessage ist PHP in der JavaScript-Technologie sehr ähnlich (haha, wenig Werbung!).window.postMessage ist eine sehr coole Technologie, was denken Sie?