Metode komunikasi berbeda tergantung pada apakah atribut SRC dalam iframe ditautkan ke domain yang sama atau tautan lintas domain.
1. Komunikasi antara halaman ayah dan anak di bawah domain yang sama
Halaman induk induk.html
Salinan kode adalah sebagai berikut:
<Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi mengatakan () {
alert ("Parent.html");
}
function callchild () {
myframe.window.say ();
myframe.window.document.getElementById ("tombol"). value = "call end";
}
</script>
</head>
<body>
<input id = "tombol" type = "tombol" value = "Panggil fungsi di Child.html mengatakan ()" ontClick = "callchild ()"/>
<iframe name = "myframe" src = "child.html"> </iframe>
</body>
</html>
Child.html
Salinan kode adalah sebagai berikut:
<Html>
<head>
<type skrip = "Teks/JavaScript">
fungsi mengatakan () {
alert ("Child.html");
}
function callparent () {
parent.say ();
parent.window.document.getElementById ("tombol"). value = "call end";
}
</script>
</head>
<body>
<input id = "tombol" type = "tombol" value = "Call the Say () Function di Parent.html" OnClick = "CallParent ()"/>
</body>
</html>
Panggilan metode
Halaman induk memanggil metode halaman anak: framename.window.childmethod ();
Halaman anak memanggil metode halaman induk: parent.window.parentmethod ();
Akses Elemen Dom
Setelah mendapatkan objek Window.Document dari halaman, Anda dapat mengakses elemen DOM.
Hal -hal yang perlu diperhatikan
Untuk memastikan bahwa operasi dilakukan setelah iframe dimuat, jika iframe belum dimuat, mulailah memanggil metode atau variabel di dalamnya, kesalahan akan terjadi. Ada dua cara untuk menentukan apakah iframe sedang memuat:
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 tidak digunakan.
Halaman induk meneruskan data ke halaman anak
Teknik implementasi adalah menggunakan nilai hash dari objek lokasi dan melewati data komunikasi melalui itu. Tambahkan string data tambahan setelah SRC iframe pada halaman induk, dan kemudian dalam beberapa hal Anda bisa mendapatkan data di sini secara instan, misalnya:
1. Atur timer dalam subpage melalui metode SetInterval, dengarkan perubahan di lokasi. HREF untuk mendapatkan informasi data di atas
2. Kemudian subpage melakukan pemrosesan logis yang sesuai berdasarkan informasi data ini.
Halaman anak meneruskan data ke halaman induk
Teknik implementasinya adalah menggunakan proxy iframe, yang tertanam di halaman anak dan harus tetap berada di domain yang sama dengan halaman induk. Kemudian, melalui itu, ia sepenuhnya memanfaatkan prinsip implementasi metode komunikasi pertama di atas, meneruskan data halaman anak ke proxy iframe. Kemudian, karena proxy iframe dan halaman utama berada di domain yang sama, halaman utama dapat memperoleh data ini menggunakan domain yang sama. Gunakan window.top atau window.parent.parent untuk mendapatkan referensi ke objek jendela tingkat atas dari browser.