Penjelasan terperinci tentang encapsulation_jquery komunikasi merentas domain iframe

komunikasi merentas domain iframe

Lihat demo Muat turun kod sumber

Seperti yang kita semua tahu, disebabkan sekatan keselamatan yang dikenakan oleh javascript front-end pada akses merentas domain, javascript hanya boleh mengakses kandungan dalam domain yang sama dengan dokumen yang mengandunginya.

Contoh penggunaan:

Keperluan adalah untuk membenamkan http://www.iframe.com/iframe.html melalui iframe dalam http://www.demo.org/top.html, Dalam halaman iframe, anda ingin memanggil kaedah js pada halaman atas dengan mengklik butang.

1. Buat kaedah di halaman teratas untuk digunakan oleh halaman dalaman

Salin kod Kod adalah seperti berikut:

fungsi testFun (teks) {
makluman(teks);
}

2. Benamkan iframe dalam http://www.demo.org/top.html

Salin kod Kod adalah seperti berikut:

3. Buat halaman proksi di bawah domain www.demo.org http://www.demo.org/proxy.htmluntuk komunikasi merentas domain

4. Tambahkan logik untuk halaman proksi dalam http://www.demo.org/proxy.html

5. Konfigurasikan alamat halaman proksi melalui js dalam halaman http://www.iframe.com/iframe.html

Salin kod Kod adalah seperti berikut:

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. Muatkan modul komunikasi melalui kissy

Salin kod Kod adalah seperti berikut:

KISSY.use('topproxy', function(S, TopProxy){
//Laksanakan kod
});

7. Akses terus http://www.demo.org/top.html melalui TopProxy.call di http://www.iframe.com/iframe.html Kaedah dalam , seperti

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

Parameter pertama kaedah panggilan ialah nama kaedah global halaman web luaran, yang menyokong "." Terdapat parameter berikut tanpa had, semuanya dihantar ke kaedah sasaran.

Nota:

1. Ia mungkin tidak dilaksanakan serta-merta selepas dipanggil. Ia akan dicetuskan selepas iframe dimuatkan, anda boleh melaksanakan kaedah yang tidak berguna terlebih dahulu.
2. Jika TopProxyConfig tidak ditetapkan, ia akan dianggap bahawa iframe yang dirujuk dan iframe induk berada dalam domain yang sama (domain besar) dan objek teratas akan dipanggil terus.
3. Di bawah IE678, ralat mungkin dilaporkan jika anda terus memanggil kaedah sistem di atas, kerana kaedah sistem tidak menyokong penggunaan.

Prinsip:

Halaman A dibenamkan dalam halaman iframe B. Jika B mahu memanggil kaedah A dan menghantar data, maka B boleh membenamkan halaman iframe C dalam domain yang sama dengan halaman A. C boleh mengakses halaman A melalui tetingkap window.top. Kemudian dalam B, anda boleh menukar cincang href C untuk menghantar beberapa maklumat kepada C, dan kemudian C menghantar maklumat kepada A, dengan itu secara tidak langsung mencapai tujuan B menghantar maklumat kepada A