Utilisez postMessage() pour transférer des informations entre les compétences pages_javascript inter-domaines iframe

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 de JavaScript ou un objet copiable. Cependant, tous les navigateurs ne peuvent pas le faire. Certains navigateurs ne peuvent donc traiter que des paramètres de chaîne. nous devons utiliser la méthode JSON.stringify() pour sérialiser les paramètres d'objet lors du passage 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() pour reconvertir les paramètres en objets lors de la réception de la page.

Recevoir un message

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

window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
case 1:
alert(data.a);break;
}
}, false); 

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être pour 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.

Le contenu ci-dessus est l'introduction de l'éditeur à l'utilisation de postMessage() pour réaliser le transfert d'informations entre des pages inter-domaines iframe. J'espère qu'il sera utile à tout le monde !