Cara mengosongkan butang kembali menggunakan JavaScript

Sejarah lawatan tapak web ialah ciri berguna yang membantu kami lebih memahami gelagat pengguna dan penggunaan tapak web. Untuk mencapai fungsi ini, kebanyakan orang akan memilih untuk menggunakan butang belakang penyemak imbas. Walau bagaimanapun, butang belakang boleh menjadi masalah dalam situasi tertentu dan perlu dikosongkan menggunakan JavaScript. Dalam artikel ini, kami akan membincangkan cara mengosongkan butang belakang menggunakan JavaScript.

Latar Belakang

Butang belakang penyemak imbas ialah alat yang sangat berkuasa yang membolehkan pengguna kembali ke halaman yang mereka lawati sebelum ini dengan mudah. Walau bagaimanapun, mungkin terdapat masalah dengan butang belakang dalam situasi tertentu. Sebagai contoh, apabila pengguna mengisi borang dan mengklik butang kembali untuk kembali ke halaman sebelumnya, data borang yang diisi mungkin hilang. Keadaan ini boleh mengecewakan pengguna dan menyusahkan laman web untuk digunakan.

Penyelesaian

Untuk menyelesaikan masalah ini, kami boleh menggunakan JavaScript untuk mengosongkan butang belakang. Ini menghalang pengguna daripada kembali ke halaman tempat mereka mengisi borang sebelum ini dan menghalang mereka daripada kehilangan data yang telah diisi sebelum ini. Berikut ialah beberapa penyelesaian biasa:

1. Gunakan history.pushState()

Terdapat objek dalam JavaScript yang dipanggil objek "history", yang boleh merekodkan perkara yang dimasukkan pengguna Semua halaman dan menyediakan cara untuk mengakses sejarah. Kita boleh menggunakan kaedah history.pushState() untuk mengosongkan butang belakang. Kaedah ini menambah rekod akses kepada sejarah pengguna dan bukannya menggantikannya. Ini bermakna apabila pengguna mengklik butang kembali, mereka akan diubah hala ke halaman terakhir yang dilawati dan bukannya halaman yang dilawati sebelum ini. Dalam kes ini, pengguna tidak kehilangan data yang diisi dalam halaman.

Berikut ialah contoh:

history.pushState(null, null, location.href);
window.onpopstate = function (event) {
  history.go(1);
};

Dalam contoh ini, kami menggunakan history.pushState() untuk merekod rekod akses pengguna. Apabila pengguna mengklik butang kembali, kami akan menggunakan acara onpopstate untuk mengubah hala mereka ke halaman yang terakhir dilawati. Dengan cara ini, walaupun pengguna mengklik butang kembali, data yang telah diisi sebelum ini dalam borang tidak akan hilang.

2. Lumpuhkan butang belakang

Jika anda mahu pengguna tidak dapat menggunakan butang belakang, anda boleh melumpuhkannya menggunakan kod berikut:

history.pushState(null, null, location.href);
window.onpopstate = function (event) {
  history.go(1);
};
window.addEventListener('load', function() {
  setTimeout(function() {
      history.pushState(null, null, location.href);
  }, 0);
});

Dalam kes ini Seterusnya, kami menggunakan kaedah setTimeout() untuk menangguhkan pelaksanaan panggilan ke kaedah history.pushState(). Ini memastikan bahawa penyemak imbas memuatkan semua elemen halaman dan log lawatan.

Perlu ambil perhatian bahawa melumpuhkan butang belakang mungkin menyusahkan pengguna dan menjejaskan penggunaan tapak web mereka. Oleh itu, penyelesaian ini hanya boleh digunakan dalam situasi tertentu.

Kesimpulan

Butang kosongkan kembali ialah ciri yang sangat berguna yang boleh membantu kami menghalang pengguna daripada kehilangan data yang diisi dalam halaman. Fungsi ini boleh dilaksanakan dengan mudah menggunakan JavaScript. Walau bagaimanapun, kaedah melumpuhkan butang belakang perlu digunakan dengan berhati-hati kerana ini boleh menjejaskan penggunaan tapak web oleh pengguna. Mana-mana penyelesaian yang anda pilih, anda harus memastikan ia sesuai untuk tapak anda dan memenuhi keperluan pengguna anda.

Atas ialah kandungan terperinci Cara mengosongkan butang kembali menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!