Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > So verwenden Sie postMessage zum Implementieren domänenübergreifender Ajax-Anfragen in HTML5_HTML5-Tutorial-Fähigkeiten

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

WBOY
Freigeben： 2016-05-16 15:51:55
Original
1569 Leute haben es durchsucht

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)

    5.  

    6.   

  8. iframe.html

  9. JavaScript-Code
Inhalt in die Zwischenablage kopieren

  1. iframe verweist auf xiebiji.com
  3. "text" name="message" value="dad" id="message"/> 
  4. "submit"/>

    5. "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)
    7. e.preventDefault();
    8. e.returnValue =
  8. false; } 
    10. Der Schlüsselcode besteht nur aus einem Satz:

JavaScript-Code

Inhalt in die Zwischenablage kopieren
win.postMessage(document.getElementById(
  1. "message").value,"*");
    2. 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(
    2. "test"
  2. ).innerHTML = e.origin "say:" e. Daten; parentwin.postMessage(
    3. '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;
      3. //Ajax var xhr = getXHR();
      4. if(xhr){
      5. xhr.open("GET",url,true);
      6. 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;
      11. parentwin.postMessage(xhr.responseText,"*");//Senden von Daten über Domänen hinweg
      12. } }
      13. Funktion getXHR(){//Get XMLHttpRequest
      14. var xhr_temp; if(window.XMLHttpRequest){
      15. xhr_temp = new XMLHttpRequest();
      16. }else if(window.ActiveXObject){
      17. xhr_temp = new ActiveXObject("Microsoft.XMLHTTP");
    17. }else{
    18. xhr_temp = null;
    19. } 
    20. return xhr_temp;
      21. } };})();

    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)

Verwandte Etiketten：
postmessage
Quelle：php.cn
Vorheriger Artikel：Implementieren der Radiergummifunktion mithilfe der Methode „clearRect()“ in den HTML5 Canvas API_html5-Tutorial-Tipps Nächster Artikel：So realisieren Sie den Ein-Klick-Direktanrufeffekt der Telefonnummer auf der Webseite_Mit Beispielen_HTML5-Tutorialfähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Felder in der AJAX POST-Anfrage aktualisieren Ich versuche, ein benutzerdefiniertes Feld in einer AJAXPOST-Anfrage mithilfe von jQuery o...
Aus 2024-04-02 11:45:41
0
1
360
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage