Comment utiliser postMessage pour implémenter des requêtes inter-domaines Ajax dans les compétences du didacticiel HTML5_html5

En raison des restrictions de la politique de même origine, Javascript présente des problèmes de communication entre domaines. Les problèmes typiques entre domaines incluent la communication entre l'iframe et le parent, etc.

Plusieurs solutions courantes :

(1) document.domain iframe;
(2) Créer dynamiquement un script
(3) iframe location.hash;

Je n'entrerai pas dans les détails de ces méthodes ici. Ce qui est enregistré est le window.postMessage de HTML5.
postMessage est compatible avec IE8, Firefox, Opera, Safari et Chrome.

Deux serveurs étrangers sont nécessaires pour les tests. Bien entendu, les serveurs locaux et en ligne peuvent également être utilisés comme deux serveurs étrangers.
Si vous utilisez phonegap pour développer, vous pouvez installer le fichier de requête sur le client, puis demander dynamiquement le traitement des données au serveur pour obtenir et afficher les données. De cette manière, n'importe quel langage et méthode de développement Web peuvent être utilisés pour développer le backend requis par l'application phonegap.


1. Utilisation de postMessage
postMessage est une nouvelle API introduite par HTML5 pour résoudre les problèmes inter-domaines js, permettant plusieurs iframes/fenêtres. communication inter-domaines.

Supposons que la structure soit la suivante :

Code JavaScriptCopier le contenu dans le presse-papiers

1. test.html
   "wrapper">

2. postMessage (inter-domaine)

 
  
pour=
"message">Envoyer un message à l'iframe :     "texte"
nom=
"message" valeur="fils" id="message"/>  "soumettre"
/> 
 
 
Informations de l'iframe cible :
"test">Aucune information pour l'instant
 
iframe.html
6. 
   

Code JavaScript

Copier le contenu dans le presse-papiers

1. iframe pointe vers xiebiji.com
2. for="message">Envoyer un message à la fenêtre parent : < /étiquette> 
3. "texte" nom="message" valeur="papa" id="message"/> 
4. "soumettre"/>

"test">Aucune information pour l'instant.

Ce qui suit est le code Javascript (envoi de données) dans 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. faux ;
} 

Le code clé n'est qu'une phrase :

Code JavaScript

Copier le contenu dans le presse-papiers

1. win.postMessage(document.getElementById("message").value,"*");

PostMessage est une méthode de l'objet de communication, donc pour communiquer avec l'iframe, l'objet iframe appelle la méthode postMessage. postMessage possède deux paramètres dont un est indispensable. Le premier paramètre correspond aux données à transmettre et le deuxième paramètre est le domaine qui permet la communication. "*" signifie que le domaine accédé n'est pas jugé, ce qui peut être compris comme autorisant la communication dans tous les domaines.

Ensuite, il y a le code dans iframe.html qui écoute pour recevoir des données :

Code JavaScript

Copier le contenu dans le presse-papiers

1. var parentwin = window.parent;window.onmessage=function(e){ 
document.getElementById(
2. "test").innerHTML = e.origin "say:" e. des données
parentwin.postMessage(
3. 'SALUT ! Vous m'avez envoyé "' e.data '" . ',"*");};

   C’est très simple, je pense que vous le comprendrez d’un coup d’œil. e.data contient les données transmises et e.origin fait référence au domaine source.
   
   Ensuite, iframe.html envoie également les données de réponse à test.html, et test.html reçoit les données. Si le code est similaire, je ne publierai pas le code.

   2. Requête inter-domaines Ajax
   
   Sur la base de la communication inter-domaine ci-dessus, placez simplement le code Ajax dans la fonction de traitement des messages dans iframe. html, envoyez la demande à test.html en utilisant les données transmises par postMessage comme paramètre, puis transmettez les données renvoyées à test.html en utilisant postMessage. De cette manière, les requêtes Ajax inter-domaines sont implémentées. C'est en fait une chose très simple.
   
   Publiez un exemple de code, mais cela n'a rien à voir avec le code ci-dessus.

   Code JavaScriptCopier le contenu dans le presse-papiers

   1. (function(){ //Obtenir des données inter-domaines window.onmessage = function(e){
   2. var url = "http://yangzebo.com/demo/noforget/test.php?msg=" e.data;
   //Ajax var xhr = getXHR();
   si(xhr){
   xhr.open("GET",url,true);
   xhr.onreadystatechange = changeHandle;
   xhr.send(null); }else{
   alert("Ajax non pris en charge"); }
   fonction changeHandle(){//Traitement des retours
   if(xhr.readyState == 4){
   var parentwin = window.parent
   parentwin.postMessage(xhr.responseText,"*");//Envoi de données entre domaines
   } }
   fonction getXHR(){//Get XMLHttpRequest
   var xhr_temp; if(window.XMLHttpRequest){
   xhr_temp = new XMLHttpRequest();
   }else if(window.ActiveXObject){
   xhr_temp = new ActiveXObject("Microsoft.XMLHTTP");
   }autre{
   xhr_temp = nul
   } 
   return xhr_temp
   }};})();

   　　然後給個不好看的Demo。
    
   有興趣代碼請求啥的自個用開發人員工具看吧，「zebo男」是從資料庫讀出來的，「my msg」是sendAndReceive.html發給test.php的Ajax請求的參數，透過test.php和iframeforAjax.html回傳到sendAndReceive.html。
    
   3. 提示
    
   要取得iframe的contentWindow才能呼叫postMessage。
    
   postMessage一定要在iframe載入完成之後呼叫才可以正常運作。 （這耗了我好長時間）