Terkadang pengembang harus menyelesaikan tugas - bagaimana menghubungkan situs yang ada diiframe> dan situs induk menggunakan JavaScript. Dan bagaimana misalnya menyegarkan sesuatu secara instaniframe> ketika sesuatu dilakukan di situs induk? Itu adalah masalah di masa lalu, tetapi tidak sekarang karena kami dapat menggunakan fitur HTML5. Mari kita lihat contoh selanjutnya denganul> item!
- Jadi di situs induk yang kami milikiul> dan dapat mengidentifikasinya sebagai '.providers_list li', dan dengan logika antarmuka ada beberapa event js yang disisipkan atau dihapusli> dari ituul>. Dan di situs yang ada diiframe> kami ingin mendapatkan teks dari tautan itu yang ada disana.
- Buat 1 file js di situs induk dan 1 file js di situs yang akan di-buit di situs induk dengan caraiframe id = "mdtf_csp_frame">
- Masukkan di file js orang tua kode berikutnya:12345678910jQuery(function () {var iframe = jQuery('#mdtf_csp_frame');setInterval(function () {var message=new Array();jQuery('.providers_list li').each(function (i, o) {message.push(jQuery.trim(jQuery(o).find('a').eq(0).text()));});iframe[0].contentWindow.postMessage(message.join(', '), '*');}, 2000);});
- Setelah halaman dimuat, kita mulai setInterval fungsi yang setiap 2 detik memeriksa daftar penyedia dan mendapatkan teks dari masing-masing tautan itu
- Kemudian menggunakan fungsi HTML5 postingPesan kami akan mengirimkan data yang dikumpulkan keiframe>
- Di situs yang ada di tagiframe> kita harus menggunakan kode berikutnya:123456789101112131415var onmessage = function (e) {var data = e.data;//var origin = e.origin;if (document.getElementById('textarea.wpbdp-field-14') !== null) {document.getElementById('textarea.wpbdp-field-14').readOnly = true;document.getElementById('textarea.wpbdp-field-14').innerHTML = data;}};if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', onmessage, false);} else if (typeof window.attachEvent != 'undefined') {window.attachEvent('onmessage', onmessage);}
- wpbdp-14 is textarea.dll di situs yang di tagiframe> dan di mana kami menambahkan informasi baru setiap 2 detik dari daftar situs induk '.providers_list li'.
Itu semuanya. Prinsip yang sama dapat Anda gunakan untuk kasus lain ...