Cara JavaScript memantau halaman bersarang

Dengan pembangunan aplikasi web, semakin banyak tapak web mula menggunakan halaman bersarang untuk membentangkan data, seperti menyarangkan iframe untuk memaparkan kandungan tapak web lain. Dalam kes ini, bagaimanakah seseorang boleh mendengar acara secara berkesan daripada halaman bersarang dalam JavaScript?

Pertama, kita perlu memahami beberapa konsep asas. Dalam pembangunan web, tapak web boleh mengandungi berbilang halaman, dan setiap halaman boleh mengandungi berbilang iframe (bingkai sebaris). Jika kita ingin mendengar peristiwa halaman bersarang dalam JavaScript, kita perlu terlebih dahulu mendapatkan elemen iframe di mana halaman bersarang berada.

Terdapat banyak cara untuk mendapatkan elemen iframe, yang paling biasa ialah menggunakan kaedah getElementById() atau kaedah querySelector() bagi objek dokumen. Contohnya, jika kita ingin mendapatkan elemen iframe dengan id "myframe", kita boleh menggunakan kod berikut:

var iframe = document.getElementById("myframe");

Selepas mendapat elemen iframe, kita boleh mendengar acara di atasnya. Di bawah ialah beberapa peristiwa iframe biasa dan kaedah pemantauan yang sepadan.

1. Memuatkan Acara Selesai

Apabila halaman dalam iframe dimuatkan, acara pemuatan akan dicetuskan. Anda boleh menggunakan kod berikut untuk mendengar acara ini:

iframe.onload = function() {
  // iframe中的页面已经加载完成
};

2. Peristiwa kegagalan pemuatan halaman

Jika halaman dalam iframe gagal dimuatkan, acara ralat akan menjadi dicetuskan. Anda boleh menggunakan kod berikut untuk mendengar acara ini:

iframe.onerror = function() {
  // iframe中的页面加载失败
};

3. Acara perubahan saiz kandungan

Kadangkala, saiz kandungan dalam iframe mungkin berubah, seperti apabila halaman baharu ditambahkan pada kandungan halaman atau beberapa elemen telah dipadamkan. Anda boleh menggunakan kod berikut untuk mendengar acara ini:

iframe.contentWindow.addEventListener("resize", function() {
  // iframe中的内容大小已经发生变化
});

Perlu diambil perhatian bahawa memandangkan kandungan dalam iframe ialah halaman di tapak web lain, kita perlu menggunakan objek contentWindow untuk mendapatkan elemen DOM dalam halaman tersebut. Di samping itu, memandangkan acara ubah saiz dilaksanakan secara berbeza dalam penyemak imbas yang berbeza, sebaiknya gunakan kaedah addEventListener() untuk mendengar acara ini.

4. Acara tatal halaman

Jika halaman dalam iframe menyokong penatalan, anda boleh menggunakan kod berikut untuk mendengar acara tatal:

iframe.contentWindow.addEventListener("scroll", function() {
  // iframe中的页面已经发生滚动
});

Serupa kepada acara ubah saiz, kami Anda juga perlu menggunakan objek contentWindow untuk mendapatkan elemen DOM dalam halaman.

Selain acara di atas, terdapat banyak lagi acara lain yang boleh dipantau. Jenis acara yang sepadan perlu dipilih mengikut keperluan khusus.

Secara umumnya, melalui kaedah di atas, kami boleh memantau pelbagai acara dengan berkesan dalam halaman bersarang. Sudah tentu, sebelum memantau, kami perlu memastikan bahawa tapak web yang kami buka tidak menggunakan teknologi kotak pasir iframe untuk melarang skrip dalam iframe. Selain itu, sekatan dasar asal yang sama juga mesti diambil kira Jika halaman dalam iframe tidak tergolong dalam nama domain yang sama dengan halaman induk, kandungannya tidak boleh diakses secara langsung.

Atas ialah kandungan terperinci Cara JavaScript memantau halaman bersarang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!