Partage de plug-ins inter-domaines bidirectionnels implémentés dans les compétences JavaScript_javascript

En raison des restrictions du navigateur (politique de même origine), les problèmes inter-domaines JavaScript ont toujours été un problème plutôt épineux. HTML5 fournit la fonction de transmission de messages entre documents pour recevoir et s'envoyer des informations entre des documents Web. Grâce à cette fonction, non seulement les pages Web ayant la même origine (numéro de port de domaine) peuvent communiquer entre elles, mais une communication interdomaine peut également être réalisée entre deux noms de domaine différents.

Messagerie entre documents La messagerie entre documents fournit la méthode postMessage pour transférer des données entre différents documents Web et prend en charge la messagerie en temps réel. De nombreux navigateurs prendront désormais en charge cette fonctionnalité, comme Google Chrome 2.0, Internet Explorer 8.0, Firefox 3.0, Opera 9.6, Safari 4.0, etc.

Alors, que dois-je faire si les navigateurs tels que IE6 et IE7 ne prennent pas en charge HTML5 ?

Vous pouvez utiliser la méthode window.name, car la modification de window.name n'implique pas de problèmes inter-domaines. Bien qu'elle ne soit pas particulièrement idéale à utiliser, l'effet est acceptable.
Cependant, nous ne pouvons pas toujours écrire window.postMessage, window.addEventListener, window.name, etc. à chaque fois que cela implique plusieurs domaines.

À cette fin, j'ai résumé l'ensemble du processus inter-domaines et l'ai encapsulé dans un plug-in JavaScript pour résoudre le problème inter-domaines bidirectionnel, réaliser une communication en temps réel entre différents documents de pages Web et réaliser des échanges inter-domaines. communication de domaine entre deux noms de domaine différents.

Adresse de téléchargement de la démo : http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar, version v2

plug-in multi-domaines javascript jcrossdomain.js

Copier le code Le code est le suivant :

(fonction (gagner){
/**
*Arbre sans fleurs
* 07/12/2013 17:12
​*/
var _jcd = {
isInited : faux,
elmt : faux,
​ hachage : '',
délimitations : ',',
rand : fonction(){
        return (new Date).getTime()
},
msg : fonction(){
alert('Attention : vous devez d'abord appeler la fonction init');
},
init : fonction (rappel, elmt){
Si(_jcd.isInited == true)
         revenir ;
​ _jcd.isInited = true;
_jcd.elmt = elmt;
Si(win.postMessage){
//Le navigateur prend en charge la méthode HTML5 postMessage
Si(win.addEventListener){
//Prend en charge Firefox, Google et d'autres navigateurs
            win.addEventListener("message", function(ev){
               callback.call(win, ev.data);
           },faux);
          }else if(win.attachEvent){
//Prise en charge du navigateur IE
           win.attachEvent("onmessage", function(ev){
               callback.call(win, ev.data);
           });
>
​​​​ _jcd.msg = fonction(données){
​​​​​​ _jcd.elmt.postMessage(data, '*');
>
}autre{
//Les navigateurs ne prennent pas en charge la méthode HTML5 postMessage, comme IE6 et 7
setInterval(function(){
Si (win.name !== _jcd.hash) {
                _jcd.hash = win.name;
               callback.call(win, _jcd.hash.split(_jcd.delims)[1]);
          }
         }, 50);
​​​​ _jcd.msg = fonction(données){
​​​​​ _jcd.elmt.name = _jcd.rand() _jcd.delims data;
>
>
>
};

var jcd = {

initParent : function(callback, iframeId){
​ _jcd.init(callback, document.getElementById(iframeId).contentWindow);
},

initChild : fonction(rappel){
​ _jcd.init(callback, win.parent);
},

sendMessage : fonction (données){
​ _jcd.msg(données);
>

};
win.jCrossDomain = jcd;
})(fenêtre);

Méthode d'appel dans la page Web parent :

Copier le code Le code est le suivant :

//Fonction de rappel personnalisée
var cb = fonction(msg){
alert("obtenir msg:" msg);
};

//Initialisation, chargement de la fonction de rappel et de l'identifiant iframe
jCrossDomain.initParent(cb, 'iframeA');

//Envoyer un message
jCrossDomain.sendMessage('bonjour, mon enfant');

Méthode d'appel dans la sous-page Web :

Copier le code Le code est le suivant :

//Fonction de rappel personnalisée
var cb = fonction(msg){
alert("obtenir msg:" msg);
};

//Initialisation, chargement de la fonction de rappel
jCrossDomain.initChild(cb);

//Envoyer un message
jCrossDomain.sendMessage('bonjour parent');

Conseils pour les tests de simulation :
Afin d'établir une communication entre différents domaines, vous pouvez ajouter deux noms de domaine au fichier hosts du système d'exploitation pour la simulation.

Ajoutez deux noms de domaine différents au fichier hosts
127.0.0.1 parent.com
127.0.0.1 enfant.com

Le processus d'évolution des programmeurs :