Heim >Web-Frontend >js-Tutorial >JavaScript verwendet window.postMessage von HTML5, um domänenübergreifende Kommunikation example_javascript Fähigkeiten zu implementieren

JavaScript verwendet window.postMessage von HTML5, um domänenübergreifende Kommunikation example_javascript Fähigkeiten zu implementieren

WBOY
WBOYOriginal
2016-05-16 16:52:391816Durchsuche

Aufgrund der Einschränkungen der Same-Origin-Richtlinie war die domänenübergreifende Kommunikation in JavaScript schon immer ein heikles Thema. Natürlich gibt es viele Lösungen:
1. Die Einstellung des document.domain iframe gilt für dieselbe Hauptdomäne, aber unterschiedliche Subdomains;
2. Bei Verwendung von iframe und location.hash werden die Daten direkt angezeigt URL sowie die Datenkapazität und -typen sind begrenzt
3.Flash LocalConnection, Objekte können in einer SWF-Datei oder zwischen mehreren SWF-Dateien kommunizieren, solange sie

sich auf demselben Client befinden, anwendungsübergreifend und domänenübergreifend.
window.name speichert Daten und das domänenübergreifende statische Proxy-Übertragungsschema von iframe nutzt die Funktion von window.name voll aus, sodass sich der Name nicht ändert, wenn sich die URL der Seite ändert.
Es gibt viele Beispielcodes für verschiedene Lösungen im Internet, Sie können selbst danach suchen.

Eine der coolsten APIs in HTML5: Cross Document Messaging. Die erweiterten Browser Internet Explorer 8, Chrome, Firefox, Opera und Safari unterstützen diese Funktion. Die Implementierung dieser Funktion ist ebenfalls sehr einfach und umfasst hauptsächlich das Ereignis „message“ zum Empfangen von Informationen und die Methode „postMessage“ zum Senden von Nachrichten.

Die „postMessage“-Methode zum Senden einer Nachricht

Eine Nachricht an das externe Fenster senden:

Code kopieren Der Code lautet wie folgt:
otherWindow.postMessage(message, targetOrigin);

otherWindow: bezieht sich auf das Zielfenster, das heißt, welches Fenster, an das die Nachricht gesendet werden soll. Hierbei handelt es sich um die window.frames-Eigenschaft. Mitglieder des von der window.open-Methode erstellten Fensters.
Parameterbeschreibung:
1. Nachricht: ist die zu sendende Nachricht. Der Typ ist String. Objekt (von IE8 und 9 nicht unterstützt)
2.targetOrigin: Ja Um den Nachrichtenempfangsbereich einzuschränken, verwenden Sie bitte '*', falls nicht eingeschränkt

"message"-Ereignis, um die Nachricht zu empfangen

Code kopieren Der Code lautet wie folgt:

var onmessage = function (event) {
var data = event.data;
var origin = event.origin;
//do someing
};
if (typeof window.addEventListener != 'undefiniert ') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefiniert') {
//for ie
window.attachEvent ('onmessage', onmessage);
}

Der erste Parameter der Rückruffunktion wird empfangen. Ereignisobjekte haben drei häufig verwendete Attribute:
1.data: Nachricht
2.origin: Nachrichtenquelladresse
3.Quelle: Quell-DOMWindow-Objekt

Natürlich weist Postmessage auch einige Mängel auf:
1.ie8, der unter ie9 übergebene Datentypwert unterstützt den Zeichenfolgentyp, kann aber verwendet werden Um dieses Problem zu lösen, muss die gegenseitige Konvertierung zwischen JSON-Objekten und -Zeichenfolgen erfolgen. 2.ie6 und ie7 müssen eine Kompatibilitätslösung schreiben. Ich persönlich denke, dass window.name zuverlässiger ist
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn