Kaedah untuk berkomunikasi antara subhalaman iframe terbenam dan kemahiran js_javascript halaman induk

Contoh dalam artikel ini menerangkan kaedah berkomunikasi antara subhalaman iframe terbenam dan halaman induk js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kaedah komunikasi antara halaman dalam bingkai iframe dan halaman utama bergantung pada sama ada atribut src dalam iframe ialah pautan domain yang sama atau pautan merentas domain Jelas terdapat kaedah komunikasi yang berbeza dan saling akses elemen DOM dalam domain yang sama adalah mudah, dan elemen merentas domain memerlukan beberapa cara yang bijak untuk mencapai komunikasi.

1. Komunikasi antara halaman ibu bapa dan anak dalam domain yang sama

Halaman induk parent.html:

Salin kod Kod adalah seperti berikut: fungsi sebut() { alert("parent.html------>Saya di parent.html"); } fungsi callChild() { //document.frames["myFrame"].window.say();//Hanya terpakai untuk pelayar IE myFrame.window.say(); myFrame.window.document.getElementById("button").value="Saya telah berubah"; } Halaman kanak-kanak child.html:

Salin kod Kod adalah seperti berikut: fungsi sebut() { alert("child.html--->Saya di child.html"); } function callParent() { parent.say(); parent.window.document.getElementsByName("myFrame")[0].style.height="100px"; } Panggilan kaedah Seperti yang ditunjukkan dalam contoh di atas, halaman induk boleh memanggil halaman anak melalui: FrameName.window.childMethod(); (Kaedah ini serasi dengan pelbagai pelayar) Halaman anak memanggil kaedah halaman induk: parent.window.parentMethod();

Akses elemen DOM

Selepas mendapatkan objek sub-tetingkap berdasarkan FrameName.window, mengakses elemen DOM di dalamnya tidak berbeza dengan mengakses elemen DOM dalam halaman yang sama Anda boleh menyalin kod melalui

🎜> Kodnya adalah seperti berikut: document.getElementById(),document.getElementsByName()[index] Contohnya: Salin kod Kod adalah seperti berikut: parent.window.document.getElementsByName("myFrame")[0]; myFrame.window.document.getElementById("butang") Tingkap boleh ditinggalkan. Nota

Pastikan untuk beroperasi selepas Iframe dimuatkan Jika anda mula memanggil kaedah atau pembolehubah sebelum Iframe dimuatkan, ralat pasti akan berlaku. Terdapat dua cara untuk menentukan sama ada Iframe telah dimuatkan:

1. Gunakan acara onload pada Iframe; 2. Gunakan document.readyState=="complete" untuk menentukan

2. Kaedah komunikasi halaman ibu bapa-anak merentas domain

Jika iframe memaut ke halaman luaran, kaedah komunikasi di bawah nama domain yang sama tidak boleh digunakan kerana mekanisme keselamatan.

Halaman induk menghantar data ke halaman anak

Cara untuk mencapai ini adalah dengan menggunakan nilai cincang objek lokasi untuk menghantar data komunikasi melaluinya Kami hanya perlu menambah rentetan #data selepas src iframe dalam halaman induk (data ialah data yang anda. mahu lulus), dan kemudian dalam halaman kanak-kanak Data di sini boleh diperolehi serta-merta melalui beberapa kaedah pada halaman Sebenarnya, kaedah yang biasa digunakan ialah:

1. Tetapkan pemasa melalui kaedah setInterval dalam subhalaman, dan pantau perubahan dalam location.href untuk mendapatkan maklumat data di atas

2. Kemudian sub-halaman boleh melakukan pemprosesan logik yang sepadan berdasarkan maklumat data ini.

Halaman anak menghantar data ke halaman induk

Helah untuk pelaksanaan ialah menggunakan proksi Iframe C, yang dibenamkan dalam halaman anak dan mesti kekal dalam domain yang sama dengan halaman induk Kemudian kita boleh menggunakan sepenuhnya prinsip pelaksanaan kaedah komunikasi pertama di atas untuk memindahkan halaman anak ke Data dihantar ke iframeC Soalan seterusnya ialah bagaimana untuk membiarkan iframeC menghantar data ke halaman utama A. Oleh kerana iframeC dan halaman utama berada dalam domain yang sama, ia menjadi lebih mudah untuk memindahkan data antara. mereka. Mereka tergolong dalam masalah komunikasi yang sama, seperti yang dibincangkan sebelum ini, di sini anda boleh menggunakan window.top harta yang biasa digunakan (anda juga boleh menggunakan window.parent.parent), yang mengembalikan rujukan kepada tetingkap peringkat atas. objek dimuatkan dalam pelayar, Dengan cara ini kita boleh terus menggunakan kaedah dalam halaman induk.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.