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 d5ba1642137c3f32f4f4493ae923989c-Element oder auf das von der aktuellen Seite angezeigte Fenster.

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 d5ba1642137c3f32f4f4493ae923989c enthält, vor schädlichen Inhalten schützen, da sie nur für eingebettete Frames über XDM kommuniziert. XDM kann auch zwischen Seiten derselben Domain verwendet werden.

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!