Utilisation de postMessage() pour implémenter la méthode de transfert d'informations entre les compétences iframe pages_javascript inter-domaines

En raison des restrictions de la politique d'origine du Web, lorsque la page utilise un lien iframe inter-domaines, la page principale et la sous-page ne peuvent pas interagir, ce qui provoque beaucoup de problèmes dans le transfert d'informations entre les pages. une série de tentatives, Finalement j'ai trouvé la méthode suivante pour y parvenir :

1. Passer le paramètre de l'url de la sous-page

Pour faire simple, ajoutez tous les paramètres qui doivent être passés à l'url qui a la même origine que la page principale, redirigez la sous-page vers l'url, puis la page principale obtient ces paramètres via le src de l'iframe

Le processus est très compliqué et cette méthode n'est pas recommandée

2. postMessage()

postMessage() est une API de transmission de messages basée sur des événements fournie par HTML5, qui peut réaliser une messagerie de documents multitextes, multi-fenêtres et inter-domaines.

La méthode postMessage(data,origin) accepte deux paramètres

1.data : Les données à transmettre. La spécification html5 mentionne que ce paramètre peut être n'importe quel type de base ou objet copiable de JavaScript. Cependant, tous les navigateurs ne peuvent pas le faire. Certains navigateurs ne peuvent traiter que les paramètres de chaîne, nous le faisons donc. Vous devez utiliser la méthode JSON.stringify() pour sérialiser les paramètres d'objet lors de la transmission de paramètres. Des effets similaires peuvent être obtenus en référençant json2.js dans les versions inférieures d'IE.

2.origin : Paramètre String, indiquant la source de la fenêtre cible, protocole + hôte + numéro de port [+URL]. L'URL sera ignorée, elle n'a donc pas besoin d'être écrite. Ce paramètre est pour des raisons de sécurité. .La méthode postMessage() uniquement Le message sera transmis à la fenêtre spécifiée. Bien sûr, si vous le souhaitez, vous pouvez également définir le paramètre sur "*", qui peut être transmis à n'importe quelle fenêtre si vous souhaitez spécifier la même chose. origin comme fenêtre actuelle, réglez-la sur "/".

Envoyer un message (sous-page)

function sendMessage(param) {
  var url;
  if (param.url) {
    url = param.url;
  };
  var dataJson = JSON.stringify({
　　　　 type:1,　　
    a: param.c,
    b: param.c,
    c: param.c,
    url: url
  });
  window.parent.postMessage(dataJson, '*');
}

Étant donné que certains navigateurs ne peuvent gérer que les paramètres de chaîne, nous devons d'abord utiliser JSON.stringfy() pour convertir les paramètres en chaînes, puis utiliser JSON.parse() sur la page de réception pour les convertir redevenu des objets.

Recevoir un message

Pour les paramètres passés par la sous-page, on peut les obtenir en écoutant le message événement de la fenêtre :

window.addEventListener('message', function(e) {
      var data = JSON.parse(e.data);
commutateur (data.type) {
cas 1 :
alerte(data.a);break;
>
}, faux);

L'événement message a plusieurs attributs importants

1.data : Comme son nom l'indique, c'est le message passé dans
2.source : l'objet window qui envoie le message
3.origin : la source de la fenêtre de message (protocole + hôte + numéro de port)
La livraison de messages inter-domaines peut être réalisée via la méthode postMessage() et l'événement de message. Il convient de noter que dans la démo, nous envoyons des messages à la page parent via la page enfant, nous utilisons donc window.parent pour envoyer et fenêtrer. recevoir :

window.parent.postMessage(dataJson, '*'); S'il s'agit de la page d'accueil vers la sous-page, il doit être échangé. Utilisez window pour envoyer et window.frames[0] pour recevoir.

L'article ci-dessus utilise postMessage() pour réaliser le transfert d'informations entre les pages iframe inter-domaines. C'est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.