Aufgrund der Einschränkungen der Browser (gleichorientierte Richtlinien) war das Cross-Domänen-Problem von JavaScript schon immer ein sehr schwieriges Problem. HTML5 liefert die Funktion der Übertragung zwischen Dokumentmeldungen und empfängt und sendet Informationen zwischen Webdokumenten. Mit dieser Funktion können nicht nur Webseiten mit demselben Ursprung (Domain + Portnummer) miteinander kommunizieren, sondern auch die Kommunikation zwischen zwei verschiedenen Domänennamen kreuzen.
Querüberschreitende Messaging Messaging Messaging bietet die Postmessage-Methode, um Daten zwischen verschiedenen Webdokumenten zu übergeben und Echtzeit-Nachrichten zu unterstützen. Viele Browser unterstützen diese Funktion nun wie Google Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, Safari 4.0+ usw.
Was soll ich tun, wenn IE6, IE7 und andere Browser, die HTML5 nicht unterstützen, nicht unterstützen?
Sie können die Methode für Fenster verwenden. Obwohl es nicht besonders ideal für die Verwendung ist, ist der Effekt akzeptabel.
Wir können jedoch kein Fenster schreiben.
Zu diesem Zweck habe ich den gesamten Cross-Domain-Prozess abstrahiert und ihn in ein JavaScript-Plug-In eingekapselt, um das Zwei-Wege-Cross-Domain-Problem zu lösen, die Echtzeitkommunikation zwischen verschiedenen Webdokumenten zu realisieren und die Cross-Domänen-Kommunikation zwischen zwei verschiedenen Domain-Namen zu realisieren.
Demo -Download -Adresse: http://xiazai.vevb.com/201501/other/jcrossdomain_v2.rar, Version V2
JavaScript Cross-Domain-Plugin jcrossdomain.js
Die Codekopie lautet wie folgt:
(Funktion (Win) {
/**
* Keine blühenden Bäume
* 2013/12/07 17:12
*/
var _jcd = {
Issinited: Falsch,
ELMT: Falsch,
Hash: '',
DecliMs: ',',
Rand: function () {
Rückgabe (neues Datum) .getTime ()
},
msg: function () {
ALERT ('WARNUNG: Sie müssen zunächst die Init -Funktion aufrufen');
},
init: function (callback, elmt) {
if (_jcd.issinited == true)
zurückkehren;
_jcd.issinited = true;
_jcd.elmt = elmt;
if (Win.PostMessage) {
// Der Browser unterstützt die HTML5 -Postmessage -Methode
if (win.addeventListener) {
// unterstützt Browser wie Firefox, Google usw.
win.addeventListener ("meldung", function (ev) {
Callback.call (Win, Ev.Data);
},FALSCH);
} else if (win.attachEvent) {
// Unterstützung des IE -Browsers
win.attachEvent ("OnMessage", Funktion (ev) {
Callback.call (Win, Ev.Data);
});
}
_jcd.msg = function (data) {
_jcd.elmt.postMessage (Daten, '*');
}
}anders{
// Der Browser unterstützt keine HTML5 -Postmessage -Methoden wie IE6 und 7
setInterval (function () {
if (win.name! == _jcd.hash) {
_jcd.hash = win.name;
callback.call (win, _jcd.hash.split (_jcd.delims) [1]);
}
}, 50);
_jcd.msg = function (data) {
_jcd.elmt.name = _jcd.rand () + _jcd.delims + Daten;
}
}
}
};
var jcd = {
Initparent: Funktion (Callback, iframeid) {
_jcd.init (callback, document.getElementById (iframeid) .ContentWindow);
},
Initchild: Funktion (Rückruf) {
_jcd.init (Callback, Win.Parent);
},
sendMessage: function (data) {
_jcd.msg (Daten);
}
};
Win.JcrossDomain = JCD;
})(Fenster);
Rufmethoden auf der übergeordneten Seite:
Die Codekopie lautet wie folgt:
// benutzerdefinierte Rückruffunktion
var cb = function (msg) {
alert ("Get msg:" + msg);
};
// Initialisieren, Rückruffunktion und Iframe -ID laden
jcrossdomain.initparent (cb, 'iframea');
// eine Nachricht senden
jcrossdomain.sendMessage ('Hallo, Kind');
Aufrufmethoden in Unterseite:
Die Codekopie lautet wie folgt:
// benutzerdefinierte Rückruffunktion
var cb = function (msg) {
alert ("Get msg:" + msg);
};
// Initialisieren, Rückruffunktion laden
JcrossDomain.initchild (CB);
// eine Nachricht senden
jcrossdomain.sendMessage ('Hallo, Eltern');
Tipps zum Simulationstest:
Um die Kommunikation zwischen verschiedenen Domänen zu erreichen, können die Hostsdatei des Betriebssystems zur Simulation zwei Domänennamen hinzugefügt werden.
Fügen Sie der Hosts -Datei zwei verschiedene Domainnamen hinzu
127.0.0.1 Parent.com
127.0.0.1 Child.com
Die Entwicklung der Programmierer: