Bagaimana untuk memuat semula halaman dalam JavaScript

JavaScript ialah bahasa skrip yang digunakan secara meluas, digunakan terutamanya untuk kesan interaktif dan dinamik pada halaman web. Menyegarkan halaman adalah bahagian yang sangat penting semasa mereka bentuk aplikasi web, dan dalam JavaScript, menyegarkan halaman adalah tugas yang sangat asas. Dalam artikel ini, kami akan membincangkan cara memuat semula halaman dalam JavaScript.

Mengapa kita perlu memuat semula halaman

Pertama sekali, kita perlu tahu mengapa kita perlu memuat semula halaman tersebut. Dalam aplikasi web, menyegarkan halaman boleh menyebabkan aplikasi memuat semula data atau melakukan operasi lain. Contohnya, apabila pengguna menambah atau mengalih keluar item daripada halaman web troli beli-belah, beberapa nombor atau maklumat perlu dikemas kini dalam masa nyata. Untuk memastikan data dikemas kini, anda boleh menggunakan kaedah muat semula dalam JavaScript untuk mengemas kini antara muka dan data.

Kaedah muat semula dalam JavaScript

JavaScript menyediakan pelbagai kaedah untuk memuat semula halaman. Kaedah ini membolehkan pengalaman pengguna dan interaksi yang lebih baik dengan aplikasi web kami. Di bawah, kami akan memperkenalkan beberapa kaedah penyegaran JavaScript yang biasa digunakan.

1 Gunakan kaedah location.reload()

Kaedah ini boleh memuatkan semula halaman semasa. Kaedah ini tidak sah, jika kita ingin memuat semula halaman web lain, kita perlu menambah alamat URL halaman web dalam kurungan. Berikut ialah dua kod sampel:

//Muat semula halaman semasa
location.reload();

//Muat semula halaman web lain
location.reload("http: //example.com");

Apabila menggunakan kaedah ini, seluruh halaman akan dimuatkan semula, termasuk semua data cache dan data storan setempat. Oleh itu, pendekatan ini datang pada kos prestasi yang sangat tinggi.

2. Gunakan kaedah location.replace()

Kaedah ini boleh digunakan untuk menggantikan halaman semasa dengan halaman baharu. Apa yang dilakukannya ialah menggantikan URL halaman web semasa, bukannya hanya memuatkan semulanya. Berikut ialah kod sampel:

//Gantikan halaman web semasa
location.replace("http://example.com");

Apabila menggunakan kaedah ini, penyemak imbas tidak akan Menambah URL pada sejarah penyemak imbas. Oleh itu, pengguna tidak boleh kembali ke halaman lama dengan mengklik butang belakang pelayar, tetapi melompat terus ke halaman baharu.

3. Gunakan kaedah location.reload(true)

Kaedah ini serupa dengan location.reload(), tetapi ia memaksa muat semula halaman web dan mengabaikan cache . Jika caching digunakan pada pemuatan halaman sebelumnya, halaman akan dimuat turun semula apabila kaedah ini dipanggil untuk memastikan data terkini. Berikut ialah contoh kod:

//Paksa muat semula halaman semasa
location.reload(true);

Apabila menggunakan kaedah ini, jika tapak web kami menggunakan sejumlah besar fail media, Pendekatan ini akan mempunyai kos prestasi yang tinggi.

4. Gunakan kaedah window.location.href

Ini ialah kaedah muat semula yang sangat mudah, yang menggunakan sifat window.location.href untuk memuat semula halaman. Berikut ialah contoh kod:

//Muat semula halaman semasa
window.location.href = window.location.href;

Apabila menggunakan kaedah ini, penyemak imbas akan memuatkan semula semasa halaman , dan kemas kini semua data cache dan data storan setempat.

Kesimpulan

Dalam artikel ini, kami memperkenalkan beberapa kaedah penyegaran JavaScript yang biasa digunakan. Kaedah ini boleh digunakan untuk menyegarkan halaman dalam JavaScript. Untuk setiap senario, kita perlu memilih kaedah yang sesuai untuk menyegarkan semula. Dalam aplikasi, terdapat banyak tempat di mana operasi muat semula diperlukan. Walau bagaimanapun, untuk sesetengah aplikasi, penyegaran yang kerap boleh menjejaskan prestasi aplikasi. Oleh itu, kita perlu menggunakan kaedah ini dengan berhati-hati. Amalan terbaik ialah meminimumkan operasi muat semula sambil mengekalkan pengalaman pengguna.

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