Contoh artikel ini menjelaskan metode halaman anak iframe tertanam dan halaman komunikasi js induk. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Metode komunikasi antara halaman dan halaman utama dalam kerangka kerja iframe jelas berbeda tergantung pada apakah atribut SRC di iframe ditautkan ke domain yang sama atau tautan lintas domain. Exchange Data dan DOM Element Mutual Access dalam domain yang sama jauh lebih sederhana, sementara domain lintas membutuhkan beberapa cara pintar untuk mencapai komunikasi.
1. Komunikasi antara halaman ayah dan anak di bawah domain yang sama
Halaman induk induk.html:
Salin kode sebagai berikut: <Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi mengatakan () {
alert ("Parent.html ------> Saya di Parent.html");
}
function callchild ()
{
//document.framesajah A
myframe.window.say ();
myframe.window.document.getElementById ("tombol"). value = "I mengubah";
}
</script>
</head>
<body>
<input type = nilai tombol = "callchild ()">
<iframe name = "myframe" src = "child.html"> </iframe>
</body>
</html>
Subpage Child.html:
Salin kode sebagai berikut: <Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi mengatakan ()
{
alert ("Child.html ---> Saya di Child.html");
}
function callparent () {
parent.say ();
parent.window.document.geteLementsByName ("myframe") [0] .style.height = "100px";
}
</script>
</head>
<body>
<input id = "tombol" type = tombol value = "Memanggil fungsi say () di parent.html" ontClick = "callparent ()">
</body>
</html>
Panggilan metode
Seperti yang ditunjukkan pada contoh di atas, metode memanggil halaman anak dari halaman induk dapat digunakan oleh: framename.window.childmethod (); (Metode ini kompatibel dengan berbagai browser)
Metode halaman anak yang memanggil halaman induk: parent.window.parentmethod ();
Akses Elemen Dom
Setelah mendapatkan objek Window Anak sesuai dengan FrameName.Window, mengakses elemen DOM tidak berbeda dengan mengakses elemen DOM di halaman yang sama. Anda dapat menyalin kode sebagai berikut: document.getElementById (), document.geteLementsbyname () [indeks] misalnya, salin kode sebagai berikut: parent.window.document.getElementsbyname ("myframe") [0];
myframe.window.document.getElementById ("tombol") Windows dapat dihilangkan.
Hal -hal yang perlu diperhatikan
Untuk memastikan bahwa operasi dilakukan setelah iframe dimuat, jika iframe tidak dimuat, itu tidak diragukan lagi akan menyebabkan kesalahan. Ada dua cara untuk menentukan apakah iframe telah dimuat:
1. Gunakan acara Onload di iframe;
2. Gunakan Dokumen.ReadyState == "Lengkapi" untuk menilai
2. Metode Komunikasi Halaman Orangtua-Anak Domain Cross-Domain
Jika iframe menghubungkan halaman eksternal, metode komunikasi dengan nama domain yang sama tidak dapat digunakan karena mekanisme keamanan.
Halaman induk meneruskan data ke halaman anak
Teknik implementasi adalah menggunakan nilai hash dari objek lokasi dan melewati data komunikasi melalui itu. Kami hanya perlu menambahkan string #Data tambahan setelah SRC iframe (data adalah data yang ingin Anda lewati), dan kemudian dapatkan data dengan cara tertentu di halaman anak. Faktanya, metode umum adalah:
1. Atur timer dalam subpage dengan menggunakan metode setInterval untuk mendengarkan perubahan lokasi. HREF untuk mendapatkan informasi data di atas
2. maka subpage dapat melakukan pemrosesan logis yang sesuai berdasarkan informasi data ini.
Halaman anak meneruskan data ke halaman induk
Teknik implementasinya adalah menggunakan proxy iframe C, yang tertanam di halaman anak dan harus tetap berada di domain yang sama dengan halaman induk. Kemudian kita dapat meneruskan data halaman anak ke IFRAMEC melalui itu menggunakan prinsip implementasi metode komunikasi pertama di atas. Pertanyaan selanjutnya adalah bagaimana membiarkan IFRAMEC meneruskan data ke halaman utama A. Karena IFRAMEC dan halaman utama berada di domain yang sama, menjadi jauh lebih mudah untuk meneruskan data di antara mereka, yang merupakan masalah komunikasi dengan nama domain yang sama. Seperti dibahas sebelumnya, di sini Anda dapat menggunakan jendela properti yang sering digunakan (juga dapat menggunakan window.parent.parent), yang mengembalikan referensi ke objek jendela tingkat atas yang dimuat ke dalam browser, sehingga kami dapat secara langsung menggunakan metode di halaman induk.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.