HTML5 Postmessage löst Cross -Domain- und Cross -Window -Nachrichtenübertragungslösungen

Normalerweise gibt es bei der Webentwicklung mehrere Probleme, die neben Clients und Serverübertragung häufig auftreten.

1. Datenübertragung von Seiten und neuen Windows geöffnet

2. Nachrichten zwischen mehreren Fenstern

3. Seite und verschachtelte Iframe -Nachrichtenübertragung

4. Cross -Domain -Datenübertragung der oben genannten drei Probleme

Postmessage ()

Diese Probleme haben einige Lösungen, aber die von HTML5 eingeführte Nachrichten -API kann bequemer, effektiver und sicher gelöst sein. Die PostMessage () -Methode ermöglicht es Skripten aus verschiedenen Quellen, asynchrone Methoden für die begrenzte Kommunikation zu verwenden, die Cross -Text -Dateien, Multi -Window- und Cross -Domain -Nachrichten realisieren können.

Die Post -Message -Methode (Daten, Ursprung) akzeptiert zwei Parameter

1. Daten: In den zu übergebenen Daten kann die HTML5 -Spezifikation erwähnt, dass der Parameter ein Grundtyp oder ein replizierbares Objekt von JavaScript sein kann, aber nicht alle Browser haben dies getan. Müssen die Methode jSON.Stringify () verwenden, um den Objektparameter beim Übergeben der Parameter zu serialisieren.

2. Original: String -Parameter, geben Sie die Quelle des Zielfensters an, Protokoll+Host+Portnummer [+URL], die URL wird ignoriert, sodass Sie es für Sicherheitsüberlegungen schreiben können. Machen Sie die Nachricht nur an das angegebene Fenster. Zu/.

http://test.com/index.html

 <div style = width: 200px; src = http://lslib.com/lslib.html> </iframe> </div>

Wir können die Nachricht an die Cross -Domain -Iframe -Seite weitergeben

 Window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');};};

Meldung empfangen

Die Seite oben test.com sandte eine Nachricht an lslib.com. So empfangen Sie Nachrichten auf der Seite lslib.com und überwachen Sie das Nachrichtenereignis des Nachrichtenereignisses des Fensters.

http://lslib.com/lslib.html

 Window.addeventListener ('message', function (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundColor; window.parent. Postmessage (color, '*');}, FALSCH;

Auf diese Weise können wir die von jedem Fenster übergebene Nachricht erhalten.

Es gibt mehrere wichtige Attribute

1. Daten: Wie der Name schon sagt, ist es die Nachricht, die weitergegeben wird

2.Source: Fensterobjekt zum Senden von Nachrichten

3.Origin: Quelle des Sendens eines Nachrichtenfensters (Protokoll+Host+Portnummer)

Auf diese Weise können Sie Cross -Domain -Nachrichten erhalten.

Einfache Demo

In diesem Beispiel ändert sich die Div links entsprechend der Farbänderung des DIV rechts rechts

 <! <div id = color> Frame Color </div> </div> <div> <Iframe id = child src = http://lslib.com/lslib.html> </div> </div> <script type = Text/javaScript> window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');} window.addd eventListener ('message', function (e) {var color = e.data;

 <! = Container Onclick = ChangeColor (); ); ;}, false); ';} Else {color =' rgb (204,102,0) ';} Container.Style.BackgroundColor = Color; .html

Wenn die Seite im Beispiel geladen wird, sendet die Homepage die Anforderung "getColor" an IFrame (die Parameter sind nicht praktisch)

 Window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');};};

Iframe empfängt die Nachricht und sendet die aktuelle Farbe an die Hauptseite

 Window.addeventListener ('message', function (e) {if (e.source! = Window.parent) return; var color = container.style.backgroundColor; window.parent. Postmessage (color, '*');}, FALSCH;

Erhalten Sie Nachrichten auf der Homepage, ändern Sie Ihre eigene Div -Farbe

 Window.addeventListener ('message', function (e) {var color = e.data; document.getElementById ('color'). Style.backgroundColor = color;);

Wenn Sie auf Iframe klicken, lösten Sie seine Farbänderungsmethode aus, senden Sie die neueste Farbe auf die Hauptseite

 Function ChangeColor () {var color = Container.Style.BackgroundColor; RGB (204,102,0) ';} Container.Style.BackgroundColor = Farbe;

Die Homepage verwendet das Programm, das gerade das Nachrichtenereignis anhörte, um seine eigene Verfärbung zu bearbeiten

 Window.addeventListener ('message', function (e) {var color = e.data; document.getElementById ('color'). Style.backgroundColor = color;);

endlich

Die einfache Verwendung löst das große Problem. Die sogenannte Browserkompatibilität ist fast zu einem Problem geworden, das der IE begonnen hat. Wesen Wesen Die guten Nachrichten sind jedoch wie Lokalstor. Bestimmt, ob AddEventListener unterstützt werden soll.

Das oben genannte ist der Inhalt dieses Artikels.