Kommentar: window.PostMessage ermöglicht es mehreren Fenstern/Frames, Daten und Informationen über Domänen hinweg weiterzugeben. Hier ist eine Beschreibung, wie Fenster.PostMessage funktioniert und wie man es in Firefox, IE8+, Opera, Safari und Chrome verwendet
Originaladresse: Fenster von HTML5.PostMessage APIOnline -Beispiel: Verwenden Sie das Fenster von HTML5.PostMessage (Bitte öffnen Sie die Konsole, um das Protokoll anzuzeigen).
Ich habe ein Mootools -Plugin -Postmessager geschrieben, um das Fenster zu verkörpern.
Nicht viele Leute wissen über das HTML5 -Fenster. In window.PostMessage können Daten und Informationen zwischen mehreren Windows/Frames über Domänen übergeben werden. Im Wesentlichen spielt Window.PostMessage eine Rolle von Cross-Domain-Ajax-Anfragen, und es erfordert natürlich keinen Remote-Server, um zusammenzuarbeiten. Als nächstes werden wir vorstellen, wie Window.PostMessage funktioniert und wie man es in Firefox, IE8+, Opera, Safari und Chrome verwendet.
1. Meldung Senden des Endes
Der erste Schritt im gesamten Vorgang besteht darin, eine Nachrichtenquelle einzurichten. Über diese Nachrichtenquelle können wir Daten auf Fensterebene (Nachrichten) an das neu geöffnete Fenster (oder Iframe) senden. Im folgenden Beispiel beträgt die Häufigkeit des Sendens von Nachrichten an ein neues Fenster alle 6 Sekunden, und das Ereignishören wird so eingestellt, dass die vom Zielfenster zurückgegebenen Antwortinformationen verarbeitet werden.
Funktion Trace (Nachricht) {
var infos = array.prototype.slice.call (Argumente, 0) .Join ("");
if ("Konsole" im Fenster) {
console.log (Infos);
} anders {
Alarm (Infos);
}
};
// Popup-Fenster erstellen
var domain = 'http://scriptandStyle.com';
var mypopup = window.open (Domain + '/windowpostMessagelistener.html''myWindow');
// Nachrichten regelmäßig senden
setInterval (function () {
var message = 'aktuelle Zeit:' + (neues Datum (). GetTime ());
Trace ('Datenquelle. Nachricht gesendet:' + meldung);
mypopup.postMessage (Nachricht, Domäne); // Dateninformationen senden und das Ziel URI festlegen
}, 6*1000);
Funktion BindEvent (Ziel, nooneventname, Handler) {
if (window.addeventListener) {
target.addeventListener (nooneventname, Handler);
} else if (window.attachEvent) {
// Die Funktion der Höreinstellung von IE ist AttafEvent
target.attachevent ("on"++nooneventname, Handler);
} anders {
Ziel ["on"+noOneVentname] = Handler;
}
};
// Hören Sie sich die empfangenen Informationen an.
BindEvent (Fenster, 'Nachricht', Funktion (Ereignis) {
// Empfangen Sie nur Nachrichten aus bestimmten Domänen
if (event.origin! == 'http://scriptandStyle.com') return;
Trace ('Antwortinformationen empfangen:', event.data);
},FALSCH);
Der ursprüngliche Autor verwendete das Fenster. Natürlich können Sie Funktionen zum Wickeln von Ereignissen erstellen oder fertige Klassenbibliotheken wie Mootools oder JQuery/Dojo verwenden, um sie zu implementieren.
Im obigen Beispiel können wir im obigen neuen Fenster eine Nachricht über die Referenz auf MyPopup des Fensterobjekts senden und das URI (Protokoll, Hostname, Portnummer) angeben, der übereinstimmt werden muss (wenn der Benutzer zu einer anderen Seite im untergeordneten Fenster springt, wird die Nachricht nicht gesendet).
In ähnlicher Weise binden wir auch den Ereignishandler, um Nachrichtennachrichten zu empfangen. Hier ist eine Erinnerung daran, dass es wichtig ist, das Ursprungsattribut des Nachrichtenereignisses zu überprüfen, da es möglicherweise von allen URIs gesendete Nachrichten empfängt, damit es nicht verwirrt wird, wenn mehrere Frames interagieren. Nach Überprüfung der Herkunft hängt die Verarbeitung dieser Nachricht von Ihrem spezifischen Geschäft und Ihren Bedürfnissen ab.
Wenn Sie einen Iframe verwenden, lautet der Code wie folgt:
// Erstellen Sie ein anderes Fenster (Iframe, Rahmen, Frameset, Oberteil, Fenster und andere Objekte, die zum Fenster gehören.)
var domain = 'http://scriptandStyle.com';
var iframe = document.getElementById ('myiframe'). ContentWindow;
// Meldungen in einer Schleife senden, natürlich können ereignisgesteuert oder so etwas verwendet werden. . .
setInterval (function () {
var message = 'aktuelle Zeit:' + (neues Datum (). GetTime ());
Trace ('Datenquelle. Nachricht gesendet:' + meldung);
Iframe.PostMessage (Nachricht, Domain); // Dateninformationen senden und das Ziel URI festlegen
}, 6*1000);
Stellen Sie sicher, dass Sie auf die Inhaltswindow -Eigenschaft des IFrame -Objekts zugreifen - nicht nur auf das IFrame -Objekt.
2. Message Receiver
Der zweite Schritt im gesamten Vorgang besteht darin, das Zielfenster fertig zu machen. Das Zweckfenster muss das Nachrichtenereignis anhören, und natürlich muss es auch die Ursprungsquelle des Ereignisses überprüfen. Auch hier kann der Message -Ereignis -Handler Nachrichten akzeptieren, die an ihn von einem Domänennamen gesendet werden. Daher ist es sehr wichtig, den Ursprung zu überprüfen und nur Nachrichten zu verarbeiten, die nur Listen vertrauen.
// Hören Sie sich die empfangenen Informationen an.
BindEvent (Fenster, 'Nachricht', Funktion (Ereignis) {
// Empfangen Sie nur Nachrichten aus bestimmten Domänen
if (event.origin! == 'http://davidwalsh.name') return;
Trace ('Message anhören:', Event.data);
// auf die Nachricht antworten
Event.Source.PostMessage ("Hallo Freunde, ich habe die Nachricht erhalten, Event.origin);
},FALSCH);
Das obige Beispiel reagiert auf die anforderende Partei.
Die wichtigen Attribute des Nachrichtenereignisses sind:
Quelle - Nachrichtenfenster/Iframe -Objekt senden
Herkunft - entsprechend dem URI (Protokoll, Domäne und Port, falls angegeben)
Daten - spezifische Dateninformationen
Diese drei Objekte sind für das Nachrichtensystem und die Überprüfung unerlässlich.
Hinweise zur Verwendung von window.postmessage
Genau wie bei allen anderen Webtechnologien ist die Gefahr offensichtlich, wenn sie unsachgemäß verwendet (keine Überprüfung der Ereignisquellen). Natürlich wird die Sicherheit von Ihnen garantiert.
Window.PostMessage ist PHP in der JavaScript -Technologie sehr ähnlich (haha, kleine Werbung!). Fenster.PostMessage ist eine coole Technologie, was denkst du?