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

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

WBOY

Libérer： 2016-05-16 15:51:55

original

1569 Les gens l'ont consulté

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

test.html
"wrapper">
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

Code JavaScript

Copier le contenu dans le presse-papiers

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

"test">Aucune information pour l'instant.

var

win = document.getElementById(

"iframe"

).contentWindow;document.querySelector(

'form'

).onsubmit=

function

(e){

"message").value,"*");
if (e.preventDefault)
faux ;

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

Code JavaScript

Copier le contenu dans le presse-papiers

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

var parentwin = window.parent;window.onmessage=function(e){
"test").innerHTML = e.origin "say:" e. des données
'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;

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

postMessage (inter-domaine)

Informations de l'iframe cible :