Mengapa halaman pemuatan iFrame dimuatkan semula?

Dalam pembangunan web, iFrame ialah teg yang sangat biasa digunakan Ia boleh membenamkan kandungan halaman lain dan beroperasi melalui JavaScript. Walau bagaimanapun, ramai pembangun sering menghadapi masalah apabila menggunakan iFrame untuk memuatkan halaman: halaman akan dimuat semula apabila dimuatkan. Terdapat banyak cara untuk menyelesaikan masalah ini, dan artikel ini akan memperkenalkan salah satu penyelesaian yang lebih biasa.

Pertama sekali, kita perlu memahami sebab halaman pemuatan iFrame dimuat semula. Biasanya, apabila kami menggunakan iFrame untuk memuatkan halaman baharu, jika halaman tersebut mengandungi kod JavaScript, kod ini akan dilaksanakan apabila halaman dimuatkan dan melaksanakan kod ini boleh menyebabkan halaman dimuat semula. Ini kerana kod ini boleh mengubah suai struktur DOM halaman atau menghantar permintaan ke pelayan, dsb. Operasi ini boleh menyebabkan halaman dimuat semula.

Untuk menyelesaikan masalah ini, kita boleh menggunakan dua kaedah. Satu ialah menggunakan JavaScript dalam iFrame, dan satu lagi adalah menggunakan JavaScript dalam halaman terbenam. Di bawah ini kami akan memperkenalkan pelaksanaan kedua-dua kaedah ini masing-masing.

1. Menggunakan JavaScript dalam iFrame

Untuk menggunakan JavaScript dalam iFrame, kami perlu menambah acara onload pada iFrame dan laksanakan halaman yang perlu dimuatkan dalam acara onload. Contohnya, kod berikut:

<iframe src="loading.html" onload="loadPage()"></iframe>
<script>
function loadPage() {
  document.getElementById('iframe').contentWindow.location.reload(true);
}
</script>

Dalam kod di atas, kami menambahkan acara onload pada iFrame dan melaksanakan fungsi loadPage() dalam acara tersebut. Fungsi ini akan memperoleh objek tetingkap dalam iFrame semasa melalui sifat contentWindow iFrame, dan kemudian memuatkan halaman melalui kaedah location.reload(). Memandangkan parameter sebenar dihantar semasa memanggil kaedah location.reload(), ini bermakna halaman terpaksa dimuat semula, jadi halaman tidak akan dimuatkan berulang kali.

2. Menggunakan JavaScript dalam halaman terbenam

Untuk menggunakan JavaScript dalam halaman terbenam, kita perlu menggunakan objek tetingkap halaman induk untuk mengendalikan iFrame. Contohnya, kod berikut:

<script>
function loadPage() {
  var iframe = window.parent.document.getElementById('iframe');
  iframe.contentWindow.location.replace('loading.html');
}
</script>

Dalam kod di atas, kami memperoleh objek tetingkap halaman induk melalui window.parent, dan mendapatkan objek DOM iFrame dalam objek ini. Kemudian kami menggunakan kaedah location.replace() untuk memuatkan halaman baharu Kaedah ini serupa dengan kaedah location.reload() kerana ia boleh memuatkan semula halaman, tetapi ia tidak akan meninggalkan rekod dalam sejarah penyemak imbas.

Ringkasan:

Di atas adalah dua kaedah untuk menyelesaikan masalah muat semula halaman iFrame Anda boleh memilih salah satu daripadanya mengikut situasi sebenar anda. Tidak kira kaedah yang digunakan, kuncinya terletak pada penulisan kod, yang perlu menggunakan ciri-ciri JavaScript yang munasabah untuk mengelakkan pemuatan berulang.

Atas ialah kandungan terperinci Mengapa halaman pemuatan iFrame dimuatkan semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!