Editor Downcode memberi Anda penjelasan mendetail tentang peristiwa penyegaran halaman pemantauan JavaScript. Pemantauan peristiwa penyegaran halaman sangat penting dalam pengembangan web. Ini dapat membantu pengembang melakukan beberapa operasi yang diperlukan saat halaman disegarkan atau ditutup, seperti menyimpan data pengguna, mengirim permintaan, dll. Namun, karena batasan keamanan browser, tidak mudah untuk membedakan secara akurat antara peristiwa penyegaran halaman dan penutupan. Artikel ini akan membahas secara mendalam beberapa metode umum dan menganalisis kelebihan dan kekurangannya untuk membantu Anda memilih opsi yang paling sesuai.
JavaScript dapat memonitor peristiwa penyegaran halaman dalam beberapa cara. Metode yang paling umum adalah dengan menggunakan pemroses peristiwa sebelum membongkar dan membongkar. Namun, penting untuk diingat bahwa secara teknis sulit untuk hanya memantau penyegaran halaman tanpa memantau peristiwa penutupan. Karena pembatasan keamanan browser, kedua peristiwa ini biasanya dipicu secara bersamaan. Namun, dengan beberapa trik, Anda dapat mencoba membedakan kedua peristiwa ini: misalnya, dengan mengatur cookie atau menggunakan sessionStorage untuk mencatat status, dan memeriksa status ini ketika pengguna memuat halaman lagi untuk menentukan apakah halaman tersebut dimuat karena untuk menyegarkan atau menutup.
Saat pengguna mencoba menyegarkan halaman, pemantauan tingkat tertentu dapat dilakukan melalui acara beforeunload.
window.addEventListener('sebelum membongkar', fungsi (e) {
//Atur pesan peringatan untuk ditampilkan saat menyegarkan
var konfirmasiMessage = 'Apakah Anda yakin ingin menyegarkan halaman? ';
(e || window.event).returnValue = konfirmasiPesan;
konfirmasi pengembalianPesan;
});
Kode ini akan memunculkan kotak dialog konfirmasi ketika pengguna me-refresh halaman. Namun, ini juga aktif ketika pengguna mencoba menutup halaman. Oleh karena itu, ini bukanlah cara yang tepat untuk membedakan antara refresh dan shutdown.
Informasi status pengguna selama sesi dapat direkam melalui sessionStorage. Ini hanya valid dalam tab browser saat ini. Ketika tab ditutup, data yang disimpan di sessionStorage akan dihapus.
//Dieksekusi saat halaman dimuat
jendela.onload = fungsi() {
if (sessionStorage.getItem(is_reloaded)) {
console.log(halaman telah disegarkan);
}
sessionStorage.setItem(is_reloaded, benar);
};
window.addEventListener('sebelum membongkar', fungsi (e) {
if (!jendela.tertutup) {
sessionStorage.removeItem(is_reloaded);
}
});
Dalam contoh ini, kami menyetel item is_reloaded di sessionStorage saat halaman dimuat. Saat halaman di-refresh, item tersebut masih ada, sehingga kita dapat mengetahui apakah halaman telah di-refresh dengan memeriksa is_reloaded. Metode ini juga tidak dapat secara akurat membedakan penyegaran dan penutupan, namun dikombinasikan dengan analisis pola perilaku pengguna, metode ini dapat memberikan tingkat perbedaan tertentu.
API Visibilitas Halaman menyediakan kemampuan untuk mendeteksi apakah suatu halaman terlihat oleh pengguna, dan juga dapat digunakan untuk menentukan perilaku pengguna secara tidak langsung.
document.addEventListener('visibilitasperubahan', fungsi() {
if (document.visibilityState === 'tersembunyi') {
// Pengguna telah meninggalkan halaman saat ini, mungkin dengan menutup atau melompat
}
if (document.visibilityState === 'terlihat') {
// Halaman menjadi terlihat, baik dengan membuka, menyegarkan, atau beralih kembali dari tab lain
}
});
Melalui API ini, Anda dapat melakukan beberapa pemrosesan ketika pengguna meninggalkan halaman, dan kemudian membuat penilaian ketika pengguna kembali ke halaman tersebut. Namun, ini tidak hanya memantau peristiwa penyegaran saja.
Anda dapat menyetel cookie dalam JavaScript dan memberikan waktu kedaluwarsa yang singkat pada cookie, memeriksa apakah cookie ada saat pengguna menyegarkan, dan menilainya berdasarkan stempel waktu:
//Setel cookie
function setCookie(nama, nilai, detik) {
var kadaluarsa = Tanggal baru(Tanggal.sekarang() + detik * 1000);
document.cookie = nama + = + nilai + ;kedaluwarsa= + kadaluwarsa.toUTCString();
}
// Dapatkan kue
fungsi getCookie(nama) {
var keyValue = document.cookie.match('(^|;) ?' + nama + '=([^;]*)(;|$)');
kembalikan nilai kunci? nilai kunci[2] : nol;
}
// Pantau penyegaran
window.addEventListener('memuat', fungsi() {
var lastTime = getCookie('last_refresh_time');
var CurrentTime = Tanggal.sekarang();
if (waktu terakhir && waktu saat ini - parseInt(waktu terakhir) < 1000) {
// Jika perbedaan antara dua stempel waktu kurang dari 1 detik, ini dianggap sebagai peristiwa penyegaran
console.log(halaman telah disegarkan);
}
setCookie('waktu_refresh_terakhir',Waktu saat ini, 1);
});
Dengan mengatur dan memeriksa keberadaan cookie dan perbedaannya dengan waktu saat ini, kami mungkin dapat menyimpulkan apakah suatu halaman telah di-refresh atau baru saja dibuka. Namun, karena cookie dapat menjangkau jendela dan tab, ini masih bukan solusi yang tepat.
1. Bagaimana cara memantau peristiwa penyegaran halaman melalui JavaScript?
Anda dapat memantau peristiwa penyegaran halaman melalui JavaScript untuk melakukan operasi terkait. Salah satu caranya adalah dengan menggunakan acara beforeunload.
window.addEventListener('beforeunload', function(event) { // Kode dieksekusi sebelum halaman di-refresh // Misalnya, mengirim permintaan, menyimpan data, dll. });2. Bagaimana cara memonitor hanya peristiwa penyegaran halaman tetapi tidak peristiwa penutupan halaman di JavaScript?
Jika Anda hanya ingin memantau peristiwa penyegaran halaman tetapi bukan peristiwa penutupan halaman, Anda dapat menggunakan kombinasi peristiwa sebelumunload dan unload.
window.addEventListener('beforeunload', function(event) { // Kode dieksekusi sebelum halaman di-refresh // Misalnya, mengirim permintaan, menyimpan data, dll. }); { // Kode dieksekusi ketika halaman ditutup // Misalnya, membersihkan sumber daya, menghemat waktu keluar, dll. });Dengan cara ini, ketika pengguna me-refresh halaman, peristiwa beforeunload akan terpicu, dan ketika pengguna menutup halaman, peristiwa beforeunload dan unload akan terpicu.
3. Bagaimana cara memantau hanya peristiwa penyegaran halaman web dalam JavaScript sambil mengecualikan pemantauan metode navigasi lainnya?
Jika Anda hanya ingin memantau peristiwa penyegaran halaman web, namun bukan metode navigasi lainnya (seperti mengeklik tautan atau mengeklik tombol maju/mundur), Anda dapat menggunakan peristiwa sebelumunload bersama dengan antarmuka PerformanceNavigation.
window.addEventListener('beforeunload', function(event) { // Tentukan apakah ini merupakan peristiwa penyegaran halaman web if (kinerja.navigation.type === performance.navigation.TYPE_RELOAD) { // Kode dieksekusi sebelum halaman disegarkan // Misalnya Mengirim permintaan, menyimpan data, dan operasi lainnya}});Gunakan performance.navigation.type untuk menentukan jenis navigasi. Jika TYPE_RELOAD, berarti halaman dipicu oleh operasi penyegaran. Dengan cara ini, kode terkait hanya akan dieksekusi pada acara penyegaran halaman web.
Saya harap konten di atas dapat membantu Anda lebih memahami metode pemantauan peristiwa penyegaran halaman JavaScript. Editor Downcodes mengingatkan Anda bahwa dalam aplikasi sebenarnya, Anda perlu memilih metode yang sesuai dengan kebutuhan spesifik dan menangani kompatibilitas.