Ein genauerer Blick auf dokumentübergreifendes Messaging in HTML5
Cross-Document Messaging, manchmal auch als XDM bezeichnet, bezieht sich auf die Übertragung von Nachrichten zwischen Seiten aus verschiedenen Domänen. Beispielsweise kommuniziert eine Seite in der Domäne www.w3cmm.com mit einer Seite in der Domäne p2p.w3cmm.com, die sich in einem Inline--Frame befindet. Vor dem Aufkommen des XDM-Mechanismus war es sehr aufwändig, diese Art der Kommunikation zuverlässiger zu implementieren. XDM standardisiert diesen Mechanismus und ermöglicht uns so eine sichere und einfache Implementierung der dokumentenübergreifenden Kommunikation.
Der Kern von XDM ist die postMessage()-Methode. In der HTML5-Spezifikation wird dieser Methodenname auch in anderen Teilen außer dem XDM-Teil erwähnt, aber sie dienen alle demselben Zweck: der Übertragung von Daten an einen anderen Ort. Bei XDM bezieht sich „anderer Ort“ auf das in der aktuellen Seite enthaltene
Die postMessage()-Methode empfängt zwei Parameter: eine Nachricht und eine Zeichenfolge, die die Domäne angibt, aus der der Nachrichtenempfänger stammt. Der zweite Parameter ist sehr wichtig, um eine sichere Kommunikation zu gewährleisten und zu verhindern, dass der Browser Nachrichten an unsichere Orte sendet. Betrachten Sie das folgende Beispiel.
var iframWindow = document.getElementById("myframe").contentWindow; iframWindow.postMessage("A secret", "http://www.w3cmm.com");
Die letzte Codezeile versucht, eine Nachricht an den Inline-Frame zu senden und gibt an, dass das Dokument im Frame von der Domäne „http://www.w3cmm.com“ stammen muss. Wenn die Quellen übereinstimmen, wird die Nachricht an den Iframe übermittelt. Andernfalls führt postMessage() nichts aus. Diese Einschränkung verhindert, dass sich die Position im Fenster ohne Ihr Wissen ändert. Wenn der zweite an postMessage() übergebene Parameter „*“ ist, bedeutet dies, dass die Nachricht an Dokumente von jeder Domäne gesendet werden kann, wir empfehlen dies jedoch nicht. Wenn
eine XDM-Nachricht empfängt, wird das Nachrichtenereignis des Fensterobjekts ausgelöst. Dieses Ereignis wird asynchron ausgelöst, daher kann es zu einer Verzö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 von postMessage() übergeben wurden.
Ursprung: Die Domäne, in der sich das Dokument befindet, das die Nachricht sendet, z. B. „http://www.w3cmm.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, aus derselben Domäne stammt, handelt es sich bei diesem Objekt um ein Fenster.
Es ist wichtig, den Ursprung des Sendefensters nach dem Empfang der Nachricht zu überprüfen. Genau 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 die Erkennung der Quelle der Nachricht im Onmessage-Handler sichergestellt werden, dass die eingehende Nachricht von einer bekannten Seite stammt. Die grundlegenden Erkennungsmodi sind wie folgt.
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } } }; EventUtil.addHandler(window, "message", function (event) { //确保发送消息的域是已知的域 if (event.origin == "http://www.w3cmm.com") { //处理接收到的数据 processMessage(event.data); //可选:向来源窗口发送回执 event.source.postMessage("Received!", "http://p2p.w3cmm.com"); } });
Ich möchte trotzdem alle daran erinnern, dass event.source in den meisten Fällen nur ein Proxy für das Fensterobjekt ist, nicht das eigentliche Fensterobjekt. Mit anderen Worten: Über dieses Proxy-Objekt kann auf keine anderen Informationen über das Fensterobjekt zugegriffen werden. Denken Sie daran, postMessage() einfach über diesen Proxy aufzurufen. Diese Methode existiert nie und kann immer aufgerufen werden.
XDM hat auch einige Macken. 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. Um auf der sicheren Seite zu sein, ist es bei der Verwendung von postMessage() am besten, nur Strings zu übergeben. Wenn Sie strukturierte Daten übergeben möchten, ist es am besten, zunächst JSON.stringify() für die zu übergebenden Daten aufzurufen und diese über postMessage() zu übergeben. string und rufen Sie dann JSON.parse() im onmessage Event-Handler-Programm auf.
Die Verwendung von XDM ist sehr praktisch, wenn Inhalte von anderen Domänen über Inline-Frames geladen werden. Daher ist diese Methode der Nachrichtenübermittlung in Mashups und Social-Networking-Anwendungen äußerst verbreitet. Mit XDM kann sich eine Seite, die einen
Das obige ist der detaillierte Inhalt vonEin genauerer Blick auf dokumentübergreifendes Messaging in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
