Perkongsian pemalam merentas domain dua hala yang dilaksanakan dalam kemahiran JavaScript_javascript

Disebabkan sekatan penyemak imbas (dasar asal yang sama), isu merentas domain JavaScript sentiasa menjadi isu yang agak sukar. HTML5 menyediakan fungsi penghantaran mesej silang dokumen untuk menerima dan menghantar maklumat antara dokumen web. Menggunakan fungsi ini, bukan sahaja halaman web dengan asal yang sama (nombor port domain) boleh berkomunikasi antara satu sama lain, tetapi juga komunikasi merentas domain boleh dicapai antara dua nama domain yang berbeza.

Pemesejan silang dokumen Pemesejan Silang Dokumen menyediakan kaedah postMessage untuk memindahkan data antara dokumen web yang berbeza dan menyokong pemesejan masa nyata. Banyak penyemak imbas kini akan menyokong ciri ini, seperti Google Chrome 2.0, Internet Explorer 8.0, Firefox 3.0, Opera 9.6, Safari 4.0, dll.

Jadi, apakah yang perlu saya lakukan jika penyemak imbas seperti IE6 dan IE7 tidak menyokong HTML5?

Anda boleh menggunakan kaedah window.name, kerana pengubahsuaian window.name tidak melibatkan isu merentas domain Walaupun ia tidak sesuai untuk digunakan, kesannya boleh diterima.
Walau bagaimanapun, kami tidak boleh selalu menulis window.postMessage, window.addEventListener, window.name, dsb. setiap kali ia melibatkan merentas domain.

Untuk tujuan ini, saya mengabstrak keseluruhan proses merentas domain dan merangkumnya ke dalam pemalam JavaScript untuk menyelesaikan masalah merentas domain dua hala, merealisasikan komunikasi masa nyata antara dokumen web yang berbeza dan mencapai merentas domain komunikasi antara dua nama domain yang berbeza .

Alamat muat turun demo: http://xiazai.jb51.net/201501/other/jcrossdomain_v2.rar, versi v2

pemalam silang domain javascript jcrossdomain.js

Salin kod Kod adalah seperti berikut:

(fungsi (menang){
/**
* Pokok tanpa bunga
* 2013/12/07 17:12
,*/
var _jcd = {
isInited : palsu,
elmt : palsu,
cincang: '',
delims : ',',
rand : function(){
        kembali (Tarikh baharu).getTime()
},
msg : function(){
alert('Amaran: Anda mesti memanggil fungsi init pada mulanya');
},
init: fungsi(panggilan balik, elmt){
Jika(_jcd.isInited == benar)
         kembali;
​ _jcd.isInited = benar;
_jcd.elmt = elmt;
Jika(menang.postMessage){
//Pelayar menyokong kaedah postMessage HTML5
If(win.addEventListener){
//Sokong Firefox, Google dan pelayar lain
           win.addEventListener("message", function(ev){
              panggil balik.panggilan(menang, ev.data);
           }, salah);
          }lain jika(win.attachEvent){
//Sokong pelayar IE
           win.attachEvent("onmessage", function(ev){
               panggil balik.panggilan(menang, ev.data);
           });
}
​​​​ _jcd.msg = fungsi(data){
​​​​​​ _jcd.elmt.postMessage(data, '*');
}
}lain{
//Pelayar tidak menyokong kaedah postMessage HTML5, seperti IE6 dan 7
setInterval(function(){
Jika (win.name !== _jcd.hash) {
                _jcd.hash = win.name;
              panggil balik.panggilan(menang, _jcd.hash.split(_jcd.delims)[1]);
          }
         }, 50);
​​​​ _jcd.msg = fungsi(data){
​​​ _jcd.elmt.name = _jcd.rand() _jcd.delims data;
}
}
}
};

var jcd = {

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

initChild : fungsi(panggilan balik){
​ _jcd.init(panggilan balik, win.parent);
},

hantarMesej: fungsi(data){
​ _jcd.msg(data);
}

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

Kaedah panggilan dalam halaman web induk:

Salin kod Kod adalah seperti berikut:

//Fungsi panggil balik tersuai
var cb = function(msg){
makluman("dapatkan msg:" msg);
};

//Permulaan, memuatkan fungsi panggil balik dan id iframe
jCrossDomain.initParent(cb, 'iframeA');

//Hantar mesej
jCrossDomain.sendMessage('hello, child');

Kaedah panggilan dalam sub-halaman web:

Salin kod Kod adalah seperti berikut:

//Fungsi panggil balik tersuai
var cb = function(msg){
makluman("dapatkan msg:" msg);
};

//Permulaan, memuatkan fungsi panggil balik
jCrossDomain.initChild(cb);

//Hantar mesej
jCrossDomain.sendMessage('hello, parent');

Petua ujian simulasi:
Untuk mencapai komunikasi antara domain yang berbeza, anda boleh menambah dua nama domain pada fail hos sistem pengendalian untuk simulasi.

Tambahkan dua nama domain berbeza pada fail hos
127.0.0.1 parent.com
127.0.0.1 child.com

Proses evolusi pengaturcara: