How to disable your browser's back button using JavaScript?-JS Tutorial-php.cn

How to disable your browser's back button using JavaScript?

王林

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

forward

1069 people have browsed it

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

The meaning of stopping the browser back button is to prevent the user from going to the previous page. Sometimes, for security reasons, we need to prevent users from going to the back of the current page.

For example, most bank websites do not allow you to go back when you use online banking to conduct certain transactions from their website. Because if the user returns from the middle of a transaction, some problems may arise. Therefore, it only allows you to complete the transaction or cancel it and start over.

Here, we will learn various ways to use JavaScript to prevent users from returning to the previous web page from the current web page. In this tutorial, we will learn to stop the browser back button using JavaScript or jQuery.

Use window.history.forward() method

The window.history.forward() method allows us to redirect the user to a previous URL. Window objects store location objects in stack format. Therefore, the forward() method of the history object finds the last location and redirects the user to the URL of that location object.

grammar

Users can use the forward() method of historical objects according to the following syntax.

window.history.forward();

Copy after login

In the above syntax, window refers to the global object, and each web page contains the window object.

Example 1

In the example below, we use the HTML tag to create a link that sends the user to the homepage of the TutorialsPoint site. In JavaScript, we just added the window.history.forward() method.

Now, whenever a user goes from the current web page to the homepage of the tutorialsPoint site, they will not be able to return to that page.

<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>

Copy after login

Example 2

In the example below, we use the setTimeOut() function to redirect the user to the previous page after a specific time. In the setTimeOut() function, we call the window.history.forward() method after 1 second.

So, in the output, the user can observe that whenever they return to the current page from the home page of the TutorialsPoint site, it redirects again after 1 second.

<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>

Copy after login

Use window.history.go() method

The window.history.go() method redirects the user to the URL of the last location.

grammar

Users can use the window.history.go() method according to the following syntax to stop the browser's back button.

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

Copy after login

In the above syntax, we add the onload attribute to the HTML element and call the stopBack() function.

Example 3

In the following example, we use the window.history.go() method to redirect the user to the previous page. Whenever a web page loads, it calls the stopBack function, which redirects the user from the current page to the previous page so we can stop the browser's back button.

<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>

Copy after login

We learned how to prevent users from returning to specific web pages. We used the window.history.forward() and window.history.go() methods.

The above is the detailed content of How to disable your browser's back button using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!