search

Home  >  Article  >  Web Front-end  >  How to disable your browser's back button using JavaScript?

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

王林
王林forward
2023-09-07 14:21:021054browse

如何使用 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();

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

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>

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>

In the above syntax, we add the onload attribute to the HTML 6c04bd5ca3fcae76e30b72ad730ca86d 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>

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!

JavaScript jquery html 栈 堆 对象 history
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Remember to protect your clients!Next article：Remember to protect your clients!

Related articles

See more