En raison des limitations du navigateur (politique d'origine homosexuelle), la question du domaine croisé de JavaScript a toujours été un problème très difficile. HTML5 fournit la fonction de la transmission de messages inter-documents et reçoit et envoie des informations entre les documents Web. En utilisant cette fonction, non seulement les pages Web avec la même origine (domaine + numéro de port) peuvent communiquer entre elles, mais peuvent également transmettre la communication dans le domaine entre deux noms de domaine différents.
Messagerie de documents croisés Cross Document Messaging fournit la méthode postmessage pour transmettre des données entre les différents documents Web, en prenant 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 IE6, IE7 et d'autres navigateurs qui ne prennent pas en charge HTML5?
Vous pouvez utiliser la méthode Window.name car la modification de la fenêtre. Le nom n'implique pas de problèmes de domaine croisé. Bien qu'il ne soit pas particulièrement idéal à utiliser, l'effet est acceptable.
Cependant, nous ne pouvons pas écrire Window.PostMessage, Window.AddeventListener, Window.name et autres contenus à chaque fois que nous sommes impliqués dans un domaine croisé.
À cette fin, j'ai résumé l'intégralité du processus de domaine croisé et l'ai encapsulé dans un plug-in JavaScript pour résoudre le problème du domaine transversal bidirectionnel, réaliser la communication en temps réel entre différents documents Web et je peux réaliser une communication entre le domaine entre deux noms de domaine différents.
Adresse de téléchargement de démonstration: http://xiazai.vevb.com/201501/other/jcrossdomain_v2.rar, version v2
JavaScript Cross-Domain Plugin jcrossdomain.js
La copie de code est la suivante:
(fonction (win) {
/ **
* Pas d'arbres en fleurs
* 2013/12/07 17:12
* /
var _jcd = {
isinited: faux,
Elmt: False,
Hash: '',
Delims: ',',
rand: function () {
return (nouvelle date) .getTime ()
},
msg: fonction () {
alert ('avertissement: vous devez appeler la fonction init au début');
},
init: function (callback, elmt) {
if (_jcd.isinited == true)
retour;
_jcd.isinited = true;
_jcd.elmt = Elmt;
if (win.postMessage) {
// Le navigateur prend en charge la méthode de postmessage HTML5
if (win.addeventListener) {
// prend en charge les navigateurs tels que Firefox, Google, etc.
win.addeventListener ("message", fonction (ev) {
callback.call (win, ev.data);
},FAUX);
} else if (win.attachevent) {
// Support IE Browser
win.attachevent ("onMessage", fonction (ev) {
callback.call (win, ev.data);
});
}
_jcd.msg = fonction (data) {
_jcd.elmt.PostMessage (données, '*');
}
}autre{
// Le navigateur ne prend pas en charge les méthodes de postmessage HTML5, telles que IE6 et 7
setInterval (function () {
if (win.name! == _jcd.hash) {
_jcd.hash = win.name;
callback.call (win, _jcd.hash.split (_jcd.delims) [1]);
}
}, 50);
_jcd.msg = fonction (data) {
_jcd.elmt.name = _jcd.rand () + _jcd.delims + data;
}
}
}
};
var jcd = {
InitParent: fonction (rappel, iframeid) {
_jcd.init (callback, document.getElementById (iframeId) .ContentWindow);
},
Initchild: fonction (rappel) {
_jcd.init (rappel, win.parent);
},
sendMessage: fonction (data) {
_jcd.msg (données);
}
};
win.jcrossdomain = jcd;
})(fenêtre);
Méthodes d'appel dans la page parent:
La copie de code est la suivante:
// Fonction de rappel personnalisée
var cb = fonction (msg) {
alert ("Get msg:" + msg);
};
// Initialiser, charger la fonction de rappel et l'ID iframe
jcrossdomain.initparent (cb, «iframea»);
//Envoyer un message
JCrossDomain.SendMessage ('Hello, Child');
Méthodes d'appel dans la sous-page:
La copie de code est la suivante:
// Fonction de rappel personnalisée
var cb = fonction (msg) {
alert ("Get msg:" + msg);
};
// Initialiser, charger la fonction de rappel
jcrossdomain.initchild (CB);
//Envoyer un message
jcrossdomain.sendMessage («Bonjour, parent»);
Conseils de test de simulation:
Afin de réaliser une communication entre différents domaines, deux noms de domaine peuvent être ajoutés 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 Child.com
L'évolution des programmeurs: