Dalam pengembangan front-end web, kami sering menggunakan kontrol iframe.
Namun, ketika mengendalikan interaksi internal dan eksternal, kata kunci yang digunakan oleh setiap browser seringkali berbeda, yang sangat merepotkan. Untuk mendapatkan objek jendela di sub-iFrame, setiap browser memiliki spesifikasi sendiri, beberapa adalah windows, beberapa adalah contentWindows, dan sebagainya, dan mungkin ada beberapa yang tidak kita ketahui.
Namun, cukup akses halaman lapisan induk dari halaman anak, dan dalam bentuk aslinya, semua orang adalah window.parent.
Kemudian melalui fitur ini, kita dapat meneruskan objek jendela kita sendiri ke halaman induk di halaman anak, sehingga halaman induk dapat dengan mudah mengakses halaman anak, dan kita tidak perlu lagi khawatir tentang cara mendapatkan objek jendela dari objek iframe.
Tanpa mengucapkan sepatah kata pun, mari kita lihat kode terlebih dahulu:
Kode halaman induk:
window.iframewindow = null; function frameready (subwindow) {window.iframewindow = subwindow; //Penugasan}; <iframe src = "xx"> </iframe>Kode Subpage:
$ (function () {window.parent.frameready (window);});Melalui kode sederhana di atas, Anda dapat mengakses objek IfRamewindow di halaman induk, dan secara langsung mendapatkan objek jendela dari halaman anak, yang sangat tidak berotak dan sangat berguna.
Bagaimana jika saya memiliki banyak iframe?
Situasi ini akan sedikit lebih rumit, tetapi tidak masalah. Kami ingin terus menggunakan solusi di atas, jadi mari kita analisis situasi saat ini:
1. Kita harus membutuhkan objek pengumpulan yang mirip dengan IFRameWindows untuk mengelola objek jendela untuk semua subpup.
2. Ketika setiap halaman anak memanggil orang tua.
Maka itu sederhana sekarang. Apa yang perlu dilakukan subpage adalah tidak lebih dari nama, nomor, dll. Mari kita lihat kode
window.subwindowname = "helloWorldwindow"; $ (function () {window.parent.frameready (window.subwindowname, window);});Lalu apa yang perlu dilakukan halaman induk adalah Refactor Frameready dan menambahkan parameter
window.iframewindows = {}; // ini menjadi fungsi objek frameReady (name, window) {window.iframewindows [name] = window;}; function getsubwindow (name) {return window.iframewindows [name];}Meringkaskan:
Halaman yang dibangun dengan skema ini memiliki keunggulan berikut:
1. Interaksi halaman induk hanya tergantung pada kata kunci orang tua (dan dengan cara sebelumnya, mereka tidak hanya bergantung pada orang tua, tetapi juga pada contentWindow, jendela dan kata kunci lain yang tidak pasti. Yang paling penting adalah bahwa dukungan orang tua masih sangat baik)
2. Objek jendela terpadu, mengurangi rantai referensi yang diminta setiap kali digunakan, dan meningkatkan kecepatan operasi
3. Poin terpenting: Kode ini jauh lebih mudah untuk ditulis.
Di atas adalah solusi untuk interaksi iframe javascript dan kompatibilitas dengan berbagai browser yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!