Detaillierte Erläuterung der grundlegenden Verwendung der Kommunikations-API in HTML5_html5-Tutorial-Fähigkeiten

1. Dokumentübergreifende Nachrichtenkommunikation
Dokumentübergreifende Nachrichtenkommunikation kann eine sichere quellenübergreifende Kommunikation zwischen Iframes, Registerkarten und Fenstern gewährleisten. Es definiert die postMessage-API als Standardmethode zum Senden von Nachrichten. Es ist sehr einfach, postMessage zum Senden von Nachrichten zu verwenden. Der Code lautet wie folgt:
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
Beim Empfang Um Nachrichten anzuzeigen, klicken Sie einfach auf die Seite „Ereignisbehandlungsfunktion hinzufügen“. Wenn eine Nachricht eintrifft, wird die Quelle der Nachricht überprüft, um festzustellen, ob die Nachricht verarbeitet werden soll.
Das Nachrichtenereignis ist ein DOM-Ereignis mit Daten- und Ursprungsattributen. Das Datenattribut ist die tatsächliche vom Absender übermittelte Nachricht und das Ursprungsattribut ist die sendende Quelle.
Die postMessage-API ist nicht nur in der Lage, zwischen Dokumenten desselben Ursprungs zu kommunizieren, sondern ist auch nützlich, wenn der Browser keine nicht-originale Kommunikation zulässt. Aufgrund seiner Konsistenz und Benutzerfreundlichkeit empfiehlt sich postMessage auch bei der Kommunikation zwischen Dokumenten gleicher Herkunft. Bei der Kommunikation in einer JavaScript-Umgebung, beispielsweise bei der Kommunikation mit HTML5-Web-Workern, sollte immer die postMessage-API verwendet werden.
1.1 Ursprungssicherheit verstehen
HTML5 Rongguang führt das Konzept des Ursprungs ein, um die Domänensicherheit zu klären und zu verbessern. Ein Ursprung ist eine Teilmenge von Adressen, die zum Aufbau von Vertrauensbeziehungen im Netzwerk verwendet werden. Die Quelle besteht aus Regeln (Schema), Host (Host) und Port (Post).
Pfad wird im Quellenkonzept nicht berücksichtigt.
HTML5 definiert die Serialisierung von Quellen. Quellen erscheinen als Zeichenfolgen in APIs und Protokollen.
PostMessage-Sicherheitsregeln stellen sicher, dass Nachrichten nicht an unbeabsichtigte Quellseiten übermittelt werden. Beim Versenden einer Nachricht gibt der Absender die Quelle des Empfängers an. Wenn das vom Absender zum Aufrufen von postMessage verwendete Fenster keinen bestimmten Ursprung hat (z. B. wenn der Benutzer zu einer anderen Website gesprungen ist), stellt der Browser die Nachricht nicht zu.
In ähnlicher Weise wird beim Empfang einer Nachricht auch die Quelle des Absenders als Teil der Nachricht angegeben. Um Fälschungen zu vermeiden, wird die Quelle der Nachricht vom Browser bereitgestellt. Der Empfänger kann entscheiden, welche Nachrichten er verarbeitet und welche er ignoriert. Wir können eine Whitelist führen und den Browser anweisen, nur Nachrichten von vertrauenswürdigen Quellen zu verarbeiten.
Es ist am besten, niemals Saiten von Drittanbietern zu bewerten. Vermeiden Sie außerdem die Verwendung der eval-Methode zur Verarbeitung anwendungsinterner Zeichenfolgen. JSON kann über die Parser window.JSON oder json,.org genutzt werden.
1.2 Browserunterstützung für dokumentübergreifende Nachrichtenkommunikation
Ein gängiger Ansatz besteht darin, zu erkennen, ob das withCredentials-Attribut im XMLHttpRequest-Objekt vorhanden ist:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. 　var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === undefiniert) { //Unterstützt kein Cross-Origin-XMLHttpRequest } else { //Unterstützt Cross- origin XMLHttpRequest }

1.3 Verwendung der postMessage-API
Tipps Die von HTML5 definierte MessageEvent-Schnittstelle ist auch Teil von HTML5 WebSockets und HTML5 WebWorkers. Die Kommunikationsfunktion von HTML5 verwendet zum Empfangen von Nachrichten dieselbe API wie die MessageEvent-Schnittstelle. Andere Kommunikations-APIs wie EventSource API und Web Workers verwenden ebenfalls die MessageEvent-Schnittstelle, um Nachrichten zu übermitteln.
1.4 Erstellen Sie eine Anwendung mit der postMessage-API
Senden Sie eine Nachricht
Sie können eine Nachricht senden, indem Sie die Funktion postMessage() im Fensterobjekt der Zielseite aufrufen. Der Code lautet wie folgt folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. window.postMessage("Hallo Welt", "porta"); >

Der erste Parameter enthält die zu sendenden Daten und der zweite Parameter ist das Ziel der Nachricht. Um eine Nachricht an einen Iframe zu senden, können Sie postMessage im contentWindow des entsprechenden Iframes aufrufen. Der Code lautet wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hallo, Welt", "cha"); Nachrichtenereignisse abhören
   Beim Empfangen von Nachrichten müssen Sie der Seite lediglich einen Ereignishandler hinzufügen. Wenn eine Nachricht eintrifft, wird die Quelle der Nachricht überprüft, um festzustellen, ob die Nachricht verarbeitet werden soll.
   
   JavaScript-CodeInhalt in die Zwischenablage kopieren

   1. window.postMessage("Hallo Welt", "porta"); >

   Ein Nachrichtenereignis ist ein DOM-Ereignis mit Daten- und Ursprungsattributen. Das Datenattribut ist die tatsächliche vom Absender übermittelte Nachricht und das Ursprungsattribut ist die sendende Quelle.
   Die Quelle besteht aus Regel (Schema), Host (Host) und Port (Port).
   Zum Beispiel: Aufgrund unterschiedlicher Regeln (wie https und http) ist die Quelle der Seite unterschiedlich.
   Der Pfad wird im Quellenbegriff nicht berücksichtigt. Zum Beispiel: Anstatt nur Pfade handelt es sich um dieselbe Quelle.
   Quellen erscheinen als Zeichenfolgen in APIs und Protokollen.
   
   
   JavaScript-CodeInhalt in die Zwischenablage kopieren

   1. var originWhiteList = ["porta", "game" , ""]; function checkWhiteList(origin) { for (var i=0; iif (origin === originWhiteList[i]) { zurück wahr; } } zurück falsch; } function messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e. Daten); } else { //Nachrichten aus unbekannten Quellen ignorieren } }

   Die postMessage-API kann sowohl auf die Kommunikation gleichen Ursprungs als auch auf die Kommunikation nicht-originaler Dokumente angewendet werden. Aufgrund ihrer Konsistenz wird postMessage auch bei der Kommunikation zwischen homologen Dokumenten empfohlen.
   
   2 XMLHttpRequest Level2
   Als verbesserte Version von XMLHttpRequest hat XMLHttpRequest Level2 seine Funktionalität erheblich verbessert. Konzentriert sich hauptsächlich auf zwei Aspekte: (1) Cross-Source-XMLHttpRequests;
   Cross-Origin-HTTP-Anfragen enthalten einen Origin-Header, um dem Server Quellinformationen der HTTP-Anfrage bereitzustellen. Der Header ist durch den Browser geschützt und kann nicht durch Anwendungscode geändert werden. Es hat im Wesentlichen die gleiche Wirkung wie das Ursprungsattribut eines Nachrichtenereignisses bei der dokumentübergreifenden Nachrichtenkommunikation.
   Die CORS-Spezifikation erfordert, dass einige sensible Verhaltensweisen, wie z. B. Anfragen zur Beantragung von Zertifikaten oder andere OPTIONS-Preflight-Anfragen als GET und POST, vom Browser an den Server gesendet werden müssen, um festzustellen, ob dieses Verhalten unterstützt werden kann, und welche Erlaubnis bedeutet, dass eine erfolgreiche Kommunikation möglicherweise von einem Server mit CORS-Funktionen unterstützt werden muss.
   2.2 Fortschrittsereignisse
   Eine der wichtigsten API-Verbesserungen in der neuen Version von XMLHttpRequest ist die Hinzufügung einer Reaktion auf den Fortschritt.
   XMLHttpRequest Level2 verwendet einen aussagekräftigen Namen Progress, um das Fortschrittsereignis zu benennen.
   
   3 Erweiterte Funktionen3.1 Strukturierte Daten
   Frühe Versionen von postMessage unterstützen nur Zeichenfolgen. Spätere Versionen unterstützten andere Datentypen wie JavaScript-Objekte, Canvas-Bilddaten und Dateien. Aufgrund der unterschiedlichen Spezifikationsunterstützung verschiedener Browser ist auch die Unterstützung verschiedener Objekttypen unterschiedlich.
   
   3.2 Framebusting
   Framebusting-Technologie kann verwendet werden, um sicherzustellen, dass bestimmte Inhalte nicht in jframe geladen werden. Die Anwendung erkennt zunächst, ob das Fenster, in dem sie sich befindet, das äußerste Fenster ist (window.top). Wenn nicht, springt sie aus dem Rahmen, der es enthält. Der Code lautet wie folgt:
   
   JavaScript-Code
   Inhalt in die Zwischenablage kopieren
   
   1. if(window!=window.top)
   2. {
   3. window.top.location=location;
   4. }
   3.3 Binärdaten
   Browser, die neue Binär-APIs (z. B. Typed Array) unterstützen, können XMLHttpRequest zum Senden von Binärdaten verwenden. Die Level-2-Spezifikation unterstützt den Aufruf der send()-Methode zum Senden von Blob- und ArrayBuffer-Objekten
   　
   XML/HTML-CodeInhalt in die Zwischenablage kopieren

   1. var a = new Uint8Array([8,6,7,5,3, 0,9]); var xhr = new XMLHttpRequest(); xhr.open ", true); console.log(a); xhr.send(a.buffer);
   XMLHttpRequest Level 2 macht auch binäre Antwortdaten verfügbar. Legen Sie den Wert des Attributs „responseType“ auf „Text“, „Dokument“, „Arraybuffer“ oder „Blob“ fest, um den vom Antwortattribut zurückgegebenen Objekttyp zu steuern. Wenn Sie die im HTTP-Antworttext enthaltenen Rohbytes anzeigen möchten, müssen Sie den Wert des Attributs „responseTyper“ auf „arraybuffer“ oder „blob“ festlegen.