Karena keterbatasan browser (kebijakan asal-asal), edisi silang JavaScript selalu menjadi masalah yang sangat sulit. HTML5 menyediakan fungsi transmisi pesan lintas dokumen, dan menerima dan mengirimkan informasi antar dokumen web. Menggunakan fungsi ini, tidak hanya halaman web dengan asal yang sama (domain + nomor port) berkomunikasi satu sama lain, tetapi juga dapat komunikasi domain silang antara dua nama domain yang berbeda.
Pesan Cross Document Cross Document Messaging menyediakan metode postmessage untuk meneruskan data antara berbagai dokumen web, mendukung pesan waktu nyata. Banyak browser sekarang akan mendukung fitur ini, seperti Google Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, Safari 4.0+, dll.
Jadi, apa yang harus saya lakukan jika IE6, IE7 dan browser lain yang tidak mendukung HTML5?
Anda dapat menggunakan metode window.name karena modifikasi window.name tidak melibatkan masalah lintas domain. Meskipun tidak terlalu ideal untuk digunakan, efeknya dapat diterima.
Namun, kami tidak dapat menulis window.postmessage, window.addeventlistener, window.name dan konten lainnya setiap kali kami terlibat dalam domain silang.
Untuk tujuan ini, saya mengabstraksi seluruh proses domain silang dan merangkumnya menjadi plug-in JavaScript untuk menyelesaikan masalah lintas domain dua arah, mewujudkan komunikasi waktu nyata antara dokumen web yang berbeda, dan dapat mewujudkan komunikasi lintas domain antara dua nama domain yang berbeda.
Alamat unduhan demo: http://xiazai.vevb.com/201501/other/jcrosdomain_v2.rar, versi v2
JavaScript Cross-Domain Plugin Jcrossdomain.js
Salinan kode adalah sebagai berikut:
(function (win) {
/**
* Tidak ada pohon mekar
* 2013/12/07 17:12
*/
var _jcd = {
isInited: false,
Elmt: Salah,
Hash: '',
Delims: ',',
rand: function () {
return (tanggal baru) .getTime ()
},
msg: function () {
Peringatan ('Peringatan: Anda harus memanggil fungsi init pada awalnya');
},
init: function (callback, elmt) {
if (_jcd.isinited == true)
kembali;
_jcd.isinited = true;
_jcd.elmt = elmt;
if (win.postmessage) {
// Browser mendukung metode postmessage HTML5
if (win.addeventListener) {
// Mendukung browser seperti Firefox, Google, dll.
win.addeventListener ("pesan", function (ev) {
callback.call (win, ev.data);
},PALSU);
} lain jika (win.attachevent) {
// Dukungan IE Browser
win.attachevent ("onMessage", function (ev) {
callback.call (win, ev.data);
});
}
_jcd.msg = fungsi (data) {
_jcd.elmt.postmessage (data, '*');
}
}kalau tidak{
// Browser tidak mendukung metode postmessage HTML5, seperti IE6 dan 7
setInterval (function () {
if (win.name! == _jcd.hash) {
_jcd.hash = win.name;
callback.call (win, _jcd.hash.split (_jcd.delims) [1]);
}
}, 50);
_jcd.msg = fungsi (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;
})(jendela);
Metode panggilan di halaman induk:
Salinan kode adalah sebagai berikut:
// Fungsi panggilan balik khusus
var cb = fungsi (msg) {
peringatan ("Dapatkan msg:" + msg);
};
// inisialisasi, muat fungsi panggilan balik dan ID iframe
jcrossdomain.initparent (cb, 'iframea');
// Kirim pesan
jcrossdomain.sendmessage ('halo, anak');
Metode Panggilan di Subpage:
Salinan kode adalah sebagai berikut:
// Fungsi panggilan balik khusus
var cb = fungsi (msg) {
peringatan ("Dapatkan msg:" + msg);
};
// inisialisasi, muat fungsi panggilan balik
jcrossdomain.initchild (CB);
// Kirim pesan
jcrossdomain.sendmessage ('halo, induk');
Tips Tes Simulasi:
Untuk mencapai komunikasi antara domain yang berbeda, dua nama domain dapat ditambahkan ke file host dari sistem operasi untuk simulasi.
Tambahkan dua nama domain yang berbeda ke file host
127.0.0.1 Parent.com
127.0.0.1 Child.com
Evolusi programmer: