So verwenden Sie postMessage zum Implementieren domänenübergreifender Ajax-Anfragen in HTML5_HTML5-Tutorial-Fähigkeiten

Aufgrund der Einschränkungen der Same-Origin-Richtlinie treten bei Javascript domänenübergreifende Kommunikationsprobleme auf. Zu den typischen domänenübergreifenden Problemen gehört die Kommunikation zwischen Iframe und Parent usw.

Mehrere gängige Lösungen:

(1) document.domain iframe;
(2) Skript dynamisch erstellen
(3) iframe location.hash;

Ich werde hier nicht näher auf diese Methoden eingehen. Was aufgezeichnet wird, ist die window.postMessage von HTML5.
postMessage ist mit IE8, Firefox, Opera, Safari und Chrome kompatibel.

Zum Testen sind zwei ausländische Server erforderlich. Natürlich können auch lokale und Online-Server als zwei ausländische Server verwendet werden.
Wenn Sie Phonegap zum Entwickeln verwenden, können Sie die Anforderungsdatei auf dem Client installieren und dann die Datenverarbeitung des Servers dynamisch anfordern, um die Daten abzurufen und anzuzeigen. Auf diese Weise kann jede Webentwicklungssprache und -methode verwendet werden, um das für die Phonegap-App erforderliche Backend zu entwickeln.


1. Verwendung von postMessage
postMessage ist eine neue API, die von HTML5 eingeführt wurde, um js-domänenübergreifende Probleme zu lösen und mehrere Iframes/Fenster zu ermöglichen domänenübergreifende Kommunikation.

Angenommen, die Struktur ist wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. test.html
   "wrapper">

2. postMessage (domänenübergreifend)

 
  
for=
"message">Eine Nachricht an den Iframe senden:     "text"
name=
"message" value="son" id="message"/>  "submit"
/> 
 
 
Informationen aus dem Ziel-Iframe:
"test"
>Noch keine Informationen
 
5. iframe.html
6. 
   JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. iframe verweist auf xiebiji.com
2. for="message">Eine Nachricht an das übergeordnete Fenster senden: < / label> 
3. "text" name="message" value="dad" id="message"/> 
4. "submit"/>

"test">Noch keine Informationen.

Das Folgende ist der Javascript-Code (Senden von Daten) in test.html: var win = document.getElementById("iframe" ).contentWindow;document.querySelector('form').onsubmit=function(e){ win.postMessage(document.getElementById(
5. "message").value,"*");
6. if (e.preventDefault)
e.preventDefault();
e.returnValue =
8. false; } 
Der Schlüsselcode besteht nur aus einem Satz:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

win.postMessage(document.getElementById(

1. "message").value,"*");
PostMessage ist eine Methode des Kommunikationsobjekts. Um mit dem Iframe zu kommunizieren, ruft das Iframe-Objekt die postMessage-Methode auf. postMessage verfügt über zwei Parameter, von denen einer unverzichtbar ist. Der erste Parameter sind die zu übergebenden Daten und der zweite Parameter ist die Domäne, die die Kommunikation zulässt. „*“ bedeutet, dass die Domäne, auf die zugegriffen wird, nicht beurteilt wird, was so verstanden werden kann, dass die Kommunikation in allen Domänen zulässig ist.

Dann gibt es den Code in iframe.html, der auf den Empfang von Daten lauscht:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

var

1. parentwin = window.parent;window.onmessage=function(e){  document.getElementById(
"test"
2. ).innerHTML = e.origin "say:" e. Daten; parentwin.postMessage(
'HI! Du hast mir "' geschickt
3. e.data '" . ',"*");};

   Es ist ganz einfach, ich glaube, Sie werden es auf einen Blick verstehen. e.data enthält die übertragenen Daten und e.origin verweist auf die Quelldomäne.
   
   Dann sendet iframe.html auch Antwortdaten an test.html und test.html empfängt die Daten. Wenn der Code ähnlich ist, werde ich den Code nicht veröffentlichen.

   2. Ajax-Cross-Domain-Anfrage
   
   Basierend auf der oben genannten Cross-Domain-Kommunikation, fügen Sie einfach den Ajax-Code in die Onmessage-Verarbeitungsfunktion im Iframe ein. html, Senden Sie die Anfrage an test.html, indem Sie die von postMessage als Parameter übergebenen Daten verwenden, und übergeben Sie dann die zurückgegebenen Daten mithilfe von postMessage an test.html. Auf diese Weise werden domänenübergreifende Ajax-Anfragen umgesetzt. Eigentlich ist es eine ganz einfache Sache.
   
   Veröffentlichen Sie einen Beispielcode, der jedoch nichts mit dem obigen Code zu tun hat.

   JavaScript-CodeInhalt in die Zwischenablage kopieren

   1. (function(){ //Get Cross-Domain-Daten window.onmessage = function(e){
   2. var url = "http://yangzebo.com/demo/noforget/test.php?msg=" e.data;
   //Ajax var xhr = getXHR();
   if(xhr){
   xhr.open("GET",url,true);
   xhr.onreadystatechange = changeHandle;
   6. xhr.send(null); }else{
   7. warning("Ajax nicht unterstützt" }
   8. Funktion changeHandle(){//Return processing
   9. if(xhr.readyState == 4){
   10. var parentwin = window.parent;
   parentwin.postMessage(xhr.responseText,"*");//Senden von Daten über Domänen hinweg
   } }
   Funktion getXHR(){//Get XMLHttpRequest
   var xhr_temp; if(window.XMLHttpRequest){
   xhr_temp = new XMLHttpRequest();
   }else if(window.ActiveXObject){
   xhr_temp = new ActiveXObject("Microsoft.XMLHTTP");
   17. }else{
   18. xhr_temp = null;
   19. } 
   20. return xhr_temp;
   } };})();

   22. Ensuite, faites une démo disgracieuse.
       
       Si la demande de code vous intéresse, veuillez utiliser les outils de développement pour la vérifier. "zebo man" est lu dans la base de données, et "my msg" est le paramètre de la requête Ajax envoyée par sendAndReceive. .html à test.php , renvoyé à sendAndReceive.html via test.php et iframeforAjax.html.
       
       3. Conseils
       
       Vous devez obtenir la fenêtre de contenu de l'iframe pour appeler postMessage.
       
       postMessage doit être appelé après le chargement de l'iframe pour fonctionner normalement. (Cela m'a pris beaucoup de temps)