Rumah > Artikel > hujung hadapan web > Bagaimana untuk memaksa satu halaman untuk memuatkan halaman lain dalam JavaScript?

Bagaimana untuk memaksa satu halaman untuk memuatkan halaman lain dalam JavaScript?

WBOYke hadapan: 2023-08-28 19:53:02785semak imbas

JavaScript 中如何强制一个页面加载另一个页面？

Dalam JavaScript, kita boleh menggunakan objek window.location untuk memaksa satu halaman memuatkan halaman lain. Kita boleh menggunakan objek lokasi untuk menetapkan URL halaman baharu. Terdapat kaedah yang berbeza - kaedah window.location.href, window.location.assign() dan window.location.replace() untuk menetapkan URL halaman baharu menggunakan objek lokasi. Kami akan membincangkan setiap sifat dan kaedah secara terperinci dalam tutorial ini.

Tingkap.Kedudukan.Ganti

Kaedah pertama ialah menggunakan window.location.hrefproperty. Sifat ini mengandungi maklumat tentang URL semasa halaman dan boleh digunakan untuk mengubah hala pengguna ke halaman baharu.

Tatabahasa

window.location.href = "new_url";

Pengguna akan terus dilencongkan ke URL yang ditentukan (url_baru).

Untuk mengubah hala pengguna selepas masa yang ditentukan, kami juga boleh menentukan fungsi setTimout, yang membolehkan pengguna diubah hala ke URL sumber selepas masa yang ditentukan dalam fungsi tersebut.

setTimeout(function() {
   window.location.href = "https://www.tutorialspoint.com";
}, 3000);

Contoh di atas akan mengubah hala pengguna ke URL yang diberikan (https://www.tutorialspoint.com) selepas 3 saat.

Contoh

Dalam contoh ini, kami telah menentukan butang (Muat) yang apabila diklik menghasilkan fungsi forceLoad(). Dalam fungsi forceLoad(), kami menggunakan sifat window.location.href untuk memuatkan semula halaman baharu - halaman utama tutorialspoint.

<html>
<body>
   <h2>Forced Load page using window.location.href property</h2>
   <p>Click on the below button to force reload new page</p>
   <button onclick="forceLoad()">Load</button>
   <script>
      function forceLoad() {
         window.location.href = "https://www.tutorialspoint.com";
      }
   </script>
</body>
</html>

Tingkap.Kedudukan.Ganti

Cara lain untuk memaksa ubah hala ke halaman lain ialah menggunakan harta window.location.replace. Kaedah ini membantu menggantikan halaman semasa dalam sejarah penyemak imbas dengan halaman lain, tetapi pada ketika ini pengguna tidak akan dapat kembali ke halaman asal.

Tatabahasa

window.location.replace("new_url");

Dalam sintaks ini, kita akan mendapat kesan yang sama seperti contoh window.location.href, tetapi perbezaannya di sini ialah halaman semasa pengguna tidak akan disimpan dalam sejarah penyemak imbas.

Contoh

Dalam contoh ini, kami telah menentukan butang (Muat) yang apabila diklik menghasilkan fungsi forceLoad(). Fungsi forceLoad() menjadikan kaedah JavaScript - location.replace() yang menggantikan sumber semasa dengan sumber pada URL yang disediakan dalam fungsi.

Sila ambil perhatian bahawa sebaik sahaja navigasi berlaku, ia tidak membenarkan pengguna menavigasi kembali ke halaman sebelumnya, yang mungkin dengan sifat location.assign() dalam javascript.

<html>
<body>
   <h2>Forced Load page using window.location.replace() method</h2>
   <p>Click below button force reload new page</p>
   <button onclick="forceLoad()">Load</button>
   <script>
      function forceLoad() {
         window.location.replace("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

Tetingkap.Kedudukan.Tugasan

Dalam kaedah ini, kami menggunakan kaedah window.location.assign, yang digunakan untuk menambah halaman baharu pada sejarah penyemak imbas supaya pengguna boleh kembali ke halaman asal yang dilayari pengguna.

Tatabahasa

window.location.assign("new_url");

Dalam sintaks ini, ia akan mempunyai kesan yang sama seperti contoh window.location, tetapi perbezaan di sini ialah halaman semasa pengguna akan disimpan dalam sejarah penyemak imbas.

Contoh

Dalam contoh ini, kami telah menentukan butang (Muat) yang apabila diklik menghasilkan fungsi forceLoad(). Fungsi ForceLoad() menjadikan kaedah JavaScript location.assign(), yang menyebabkan tetingkap memuatkan dan memaparkan dokumen atau halaman pada URL yang ditentukan pada masa ini. Sebaik sahaja navigasi berlaku, ia juga membenarkan pengguna menavigasi kembali ke halaman sebelumnya dengan bantuan harta yang dipanggil Location.assign() dengan hanya menekan butang "kembali" penyemak imbas.

<html>
<body>
   <h2>Window.location.assign() method</h2>
   <button onclick="forceLoad()">Load</button>
   <script>
      function forceLoad() {
         location.assign("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

Perbezaan antara window.location, window.location.replace dan window.location.assign

Asas	window.location.href	tetingkap.lokasi.tugasan	Tingkap.Kedudukan.Ganti
Definisi	Ia mendapat URL semasa dan mengubah hala ke dokumen atau halaman baharu yang ditentukan oleh URL.	Ia memuatkan dan memaparkan dokumen atau halaman yang dinyatakan dalam URL.	Ia menggantikan halaman semasa dengan halaman yang dinyatakan dalam URL.
Sejarah Pelayar	Ia tidak menambah dokumen atau halaman yang baru dimuatkan pada sejarah penyemak imbas.	Ia menyimpan dokumen atau halaman yang baru dimuatkan dalam sejarah penyemak imbas.	Ia juga akan menyimpan dokumen atau halaman yang baru dimuatkan dalam sejarah penyemak imbas.
Kembali	Ia membolehkan pengguna kembali ke halaman/dokumen sebelumnya.	Ia juga membolehkan pengguna kembali ke halaman sebelumnya.	Ia tidak membenarkan pengguna untuk kembali ke halaman sebelumnya.

Perbezaan utama antara kaedah window.location.href, window.location.replace() dan window.location.assign() ialah cara mereka mengendalikan sejarah penyemak imbas. Jika kita bercakap tentang kaedah location.replace, ia menggantikan URL semasa dan tidak membenarkan pengguna untuk kembali ke halaman sebelumnya. Kaedah location.assign akan memuatkan dokumen baharu dan menambahkannya pada sejarah penyemak imbas, sambil membenarkan pengguna kembali ke halaman yang dibuka sebelum ini. Akhir sekali, kaedah window.location adalah sama dengan location.assign kerana ia turut menambahkan dokumen baharu pada sejarah penyemak imbas.

Kesimpulan

Untuk menyimpulkan artikel ini, memaksa halaman baharu memuatkan halaman lain dalam JavaScript adalah satu tugas yang mudah dan boleh dilakukan menggunakan pelbagai kaedah JavaScript, iaitu harta window.location.href, kaedah window.location.replace() atau window .location. assign() kaedah. Semua kaedah ini membantu pembangun mencipta halaman web yang dinamik dan interaktif, yang membantu mewujudkan interaksi pengguna yang lebih baik dan meningkatkan pengalaman aplikasi pengguna.

Atas ialah kandungan terperinci Bagaimana untuk memaksa satu halaman untuk memuatkan halaman lain dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Buat bot Slack berasaskan Node.jsArtikel seterusnya：Buat bot Slack berasaskan Node.js

Artikel berkaitan

Lihat lagi