Teilen von bidirektionalen domänenübergreifenden Plug-Ins, die in JavaScript_Javascript-Kenntnissen implementiert sind

Aufgrund von Browserbeschränkungen (Same-Origin-Richtlinie) waren domänenübergreifende JavaScript-Probleme schon immer ein ziemlich heikles Thema. HTML5 bietet die Funktion der dokumentübergreifenden Nachrichtenübertragung, um Informationen zwischen Webdokumenten zu empfangen und untereinander zu senden. Mit dieser Funktion können nicht nur Webseiten mit demselben Ursprung (Domänen-Portnummer) miteinander kommunizieren, sondern auch eine domänenübergreifende Kommunikation zwischen zwei verschiedenen Domänennamen erreicht werden.

Dokumentübergreifendes Messaging Cross Document Messaging bietet die postMessage-Methode zum Übertragen von Daten zwischen verschiedenen Webdokumenten und unterstützt Echtzeit-Messaging. Viele Browser unterstützen diese Funktion mittlerweile, beispielsweise Google Chrome 2.0, Internet Explorer 8.0, Firefox 3.0, Opera 9.6, Safari 4.0 usw.

Was soll ich also tun, wenn Browser wie IE6 und IE7 HTML5 nicht unterstützen?

Sie können die Methode window.name verwenden, da die Änderung von window.name keine domänenübergreifenden Probleme mit sich bringt. Obwohl sie nicht besonders ideal zu verwenden ist, ist der Effekt akzeptabel.
Wir können jedoch nicht immer window.postMessage, window.addEventListener, window.name usw. schreiben, wenn es sich um domänenübergreifende Elemente handelt.

Zu diesem Zweck habe ich den gesamten domänenübergreifenden Prozess abstrahiert und in ein JavaScript-Plug-In gekapselt, um das bidirektionale domänenübergreifende Problem zu lösen, eine Echtzeitkommunikation zwischen verschiedenen Webseitendokumenten zu realisieren und eine domänenübergreifende Kommunikation zu erreichen. Domänenkommunikation zwischen zwei verschiedenen Domänennamen.

Demo-Download-Adresse: http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar, Version v2

Javascript-Cross-Domain-Plug-in jcrossdomain.js

Code kopieren Der Code lautet wie folgt:

(Funktion (win){
/**
* Baum ohne Blumen
* 07.12.2013 17:12
​*/
var _jcd = {
isInited: falsch,
elmt: falsch,
​ Hash: '',
Trennzeichen: ',',
rand : function(){
        return (new Date).getTime()
},
Nachricht: function(){
warning('Warnung: Sie müssen zuerst die Init-Funktion aufrufen');
},
init: function(callback, elmt){
If(_jcd.isInited == true)
         zurück;
​ _jcd.isInited = true;
_jcd.elmt = elmt;
If(win.postMessage){
//Browser unterstützt die HTML5-PostMessage-Methode
If(win.addEventListener){
//Unterstützt Firefox, Google und andere Browser
            win.addEventListener("message", function(ev){
               callback.call(win, ev.data);
           },false);
          }else if(win.attachEvent){
//Unterstützung des IE-Browsers
           win.attachEvent("onmessage", function(ev){
               callback.call(win, ev.data);
           });
}
​​​​ _jcd.msg = function(data){
​​​​​​ _jcd.elmt.postMessage(data, '*');
}
}else{
//Browser unterstützen die HTML5-PostMessage-Methode nicht, z. B. 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 data;
}
}
}
};

var jcd = {

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

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

sendMessage: function(data){
​ _jcd.msg(data);
}

};
win.jCrossDomain = jcd;
})(Fenster);

Aufrufmethode auf der übergeordneten Webseite:

Code kopieren Der Code lautet wie folgt:

//Benutzerdefinierte Rückruffunktion
var cb = function(msg){
alarm("get msg:" msg);
};

//Initialisierung, Rückruffunktion und Iframe-ID laden
jCrossDomain.initParent(cb, 'iframeA');

//Eine Nachricht senden
jCrossDomain.sendMessage('Hallo, Kind');

Aufrufmethode in der Unterseite:

Code kopieren Der Code lautet wie folgt:

//Benutzerdefinierte Rückruffunktion
var cb = function(msg){
alarm("get msg:" msg);
};

//Initialisierung, Rückruffunktion laden
jCrossDomain.initChild(cb);

//Eine Nachricht senden
jCrossDomain.sendMessage('hello, parent');

Tipps für Simulationstests:
Um eine Kommunikation zwischen verschiedenen Domänen zu erreichen, können Sie zur Simulation zwei Domänennamen zur Hosts-Datei des Betriebssystems hinzufügen.

Fügen Sie der Hosts-Datei zwei verschiedene Domänennamen hinzu
127.0.0.1 parent.com
127.0.0.1 child.com

Der Evolutionsprozess von Programmierern: