Bagaimana untuk melumpuhkan butang belakang penyemak imbas anda menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk melumpuhkan butang belakang penyemak imbas anda menggunakan JavaScript?

王林

Lepaskan： 2023-09-07 14:21:02

ke hadapan

1028 orang telah melayarinya

如何使用 JavaScript 停止浏览器的后退按钮？

Maksud butang berhenti pelayar kembali adalah untuk menghalang pengguna daripada pergi ke halaman sebelumnya. Kadangkala, atas sebab keselamatan, kami perlu menghalang pengguna daripada pergi ke bahagian belakang halaman semasa.

Sebagai contoh, kebanyakan laman web bank tidak membenarkan anda kembali apabila anda menggunakan perbankan dalam talian untuk membuat transaksi tertentu dari laman web mereka. Kerana jika pengguna kembali dari pertengahan transaksi, beberapa masalah mungkin timbul. Oleh itu, ia hanya membenarkan anda melengkapkan transaksi atau membatalkannya dan memulakan semula.

Di sini, kita akan mempelajari pelbagai cara untuk menghalang pengguna daripada kembali ke halaman web sebelumnya daripada halaman web semasa menggunakan JavaScript. Dalam tutorial ini, kita akan belajar untuk menghentikan butang kembali pelayar menggunakan JavaScript atau jQuery.

Gunakan kaedah window.history.forward()

Kaedah

window.history.forward() membolehkan kami mengubah hala pengguna ke URL sebelumnya. Objek tetingkap menyimpan objek lokasi dalam format tindanan. Oleh itu, kaedah forward() bagi objek sejarah mencari lokasi terakhir dan mengubah hala pengguna ke URL objek lokasi tersebut.

Tatabahasa

Pengguna boleh menggunakan kaedah forward() bagi objek sejarah mengikut sintaks berikut.

window.history.forward();

Salin selepas log masuk

Dalam sintaks di atas, tetingkap merujuk kepada objek global, dan setiap halaman web mengandungi objek tetingkap.

Contoh 1

Dalam contoh di bawah, kami menggunakan teg HTML untuk membuat pautan yang menghantar pengguna ke halaman utama tapak TutorialsPoint. Dalam JavaScript, kami hanya menambah kaedah window.history.forward().

Kini, apabila pengguna pergi dari halaman web semasa ke halaman utama tapak tutorialsPoint, mereka tidak akan dapat kembali ke halaman tersebut.

<html>
<body> 
   <h2>Preventing the browser's back button using the <i> window.history.forward() </i> method. </h2>
   <h3>Click the below link. </h3>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <script>
      window.history.forward();
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami menggunakan fungsi setTimeOut() untuk mengubah hala pengguna ke halaman sebelumnya selepas masa tertentu. Dalam fungsi setTimeOut(), kami memanggil kaedah window.history.forward() selepas 1 saat.

Jadi, dalam output, pengguna boleh melihat bahawa apabila mereka kembali ke halaman semasa dari halaman utama tapak TutorialsPoint, ia mengubah hala semula selepas 1 saat.

<html>
<body>
   <h2>Preventing the browser's back button using the <i> window.history.forward() </i> method. </h2>
   <h3>Click the below link. </h3>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint </a> 
   <script>
      setTimeout(() => { window.history.forward() }, 1000);
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah window.history.go()

Kaedah

window.history.go() mengubah hala pengguna ke URL lokasi terakhir.

Tatabahasa

Pengguna boleh menggunakan kaedah window.history.go() mengikut sintaks berikut untuk menghentikan butang belakang penyemak imbas.

<body onload = "stopBack();"></body>
<script>
   function stopBack() {
      window.history.go(1);
   }
</script>

Salin selepas log masuk

Dalam sintaks di atas, kami menambah atribut onload pada elemen HTML dan memanggil fungsi stopBack().

Contoh 3

Dalam contoh di bawah, kami menggunakan kaedah window.history.go() untuk mengubah hala pengguna ke halaman sebelumnya. Setiap kali halaman web dimuatkan, ia memanggil fungsi stopBack, yang mengubah hala pengguna dari halaman semasa ke halaman sebelumnya supaya kami boleh menghentikan butang belakang penyemak imbas.

<html>
<body onload="stopBack();">
   <h2>Preventing the browser's back button using the <i>window.history.go() </i> method.</h2>
   <h3>Click the below link. </h3>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <div id = "output"> </div>
   <script>
      var output = document.getElementById('output');
      function stopBack() {
         window.history.go(1);
      }
   </script>
</body>
</html>

Salin selepas log masuk

Kami belajar cara menghalang pengguna daripada kembali ke halaman web tertentu. Kami menggunakan kaedah window.history.forward() dan window.history.go().

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan butang belakang penyemak imbas anda menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!