Maison >interface Web >js tutoriel >JavaScript utilise window.postMessage de HTML5 pour implémenter les compétences de communication inter-domaines example_javascript

JavaScript utilise window.postMessage de HTML5 pour implémenter les compétences de communication inter-domaines example_javascript

WBOY
WBOYoriginal
2016-05-16 16:52:391815parcourir

En raison des restrictions de la même politique d'origine, la communication entre domaines a toujours été un problème épineux en JavaScript. Bien sûr, il existe de nombreuses solutions :
1. Le paramétrage de l'iframe document.domain s'applique au même domaine principal mais à des sous-domaines différents
2. En utilisant l'iframe et location.hash, les données sont directement exposées dans le URL, et la capacité et les types de données sont limités
3.Flash LocalConnection, les objets peuvent communiquer dans un fichier SWF ou entre plusieurs fichiers SWF, à condition que

soient sur le même client, entre applications et à travers les domaines.
window.name enregistre les données et le schéma de transmission dynamique du proxy statique iframe inter-domaines utilise pleinement la fonctionnalité de window.name selon laquelle le nom ne change pas car l'URL de la page change.
Il existe de nombreux exemples de codes pour diverses solutions sur Internet, vous pouvez les rechercher vous-même.

L'une des API les plus intéressantes du HTML5 : la messagerie multidocument. Les navigateurs avancés Internet Explorer 8, Chrome, Firefox, Opera et Safari prendront tous en charge cette fonctionnalité. La mise en œuvre de cette fonction est également très simple, comprenant principalement l'événement "message" pour recevoir des informations et la méthode "postMessage" pour envoyer des messages.

La méthode "postMessage" pour envoyer un message

Envoyer un message vers la fenêtre externe :

Copier le code Le code est le suivant :
otherWindow.postMessage(message, targetOrigin);

otherWindow : fait référence à la fenêtre cible, c'est-à-dire qui fenêtre à laquelle envoyer le message, qui est la propriété window.frames Membres de ou la fenêtre créée par la méthode window.open
Description du paramètre :
1.message : est le message à envoyer, le type est String, Objet (non pris en charge par IE8 et 9)
2.targetOrigin : Oui Pour limiter la plage de réception du message, veuillez utiliser '*' s'il n'est pas limité

événement "message" pour recevoir le message.

Copier le code Le code est le suivant :

var onmessage = function (event) {
var data = event.data;
var origin = event.origin
//do someing
}; ') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent ('onmessage', onmessage);
}
Le premier paramètre de la fonction de rappel est reçu. Les objets événementiels ont trois attributs couramment utilisés :
1.data : message
2.origin : adresse source du message
3.source : objet source DOMWindow

Bien sûr, postmessage présente également quelques défauts :
1.ie8, la valeur du type de données transmise sous ie9 prend en charge le type de chaîne, mais vous pouvez utiliser conversion mutuelle entre les objets JSON et les chaînes pour résoudre ce problème ;
2.ie6, ie7 doit écrire une solution de compatibilité, je pense personnellement que window.name est plus fiable ;
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn