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.
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.
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.
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>
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.
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.
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>
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.
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.
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>
| 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.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
