Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to stop browser's back button using JavaScript?
Stopping the browser’s back button meaning is that preventing users from going to the previous page. Sometimes, we need to prevent users from going to the back of the current page for security purposes.
For example, most bank sites don’t allow you to go back when you are doing some transaction from their site using online banking. Because if users go back from the midtransaction, it can create some issues. So, it only allows you to either complete the transaction or cancel the transaction and start it again.
Here, we will learn various approaches to prevent users from going back to the previous web page from the current web page using JavaScript. In this tutorial, we will learn to stop browser back button using JavaScript or jQuery.
Use the window.history.forward() method
The window.history.forward() method allows us to redirect users to the previous URL. The window object stores the location object in the stack format. So, the forward() method of the history object finds the last location and redirects users to the URL of that location object.
Syntax
Users can follow the syntax below to use the forward() method of the history object.
window.history.forward();
In the above syntax, the window refers to the global object, and every web page contains the window object.
Example 1
In the example below, we have created the link to send users to the home page of TutorialsPoint’s website using the HTML <a> tag. In JavaScript, we just added the window.history.forward() method.
Now, whenever users go to the home page of tutorialsPoint’s website from the current web page, they won’t be able to come back to this 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 have used the setTimeOut() function to redirect users to the previous page after a particular time. In the setTimeOut() function, we call the window.history.forward() method after 1 second.
So, in the output, users can observe that whenever they return to the current page from the home page of TutorialsPoint’s website, it will redirect 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 users to the URL of the last location.
Syntax
Users can follow the syntax below to use the window.history.go() method to stop the browser’s back button.
<body onload = "stopBack();"></body>
<script>
function stopBack() {
window.history.go(1);
}
</script>
In the above syntax, we have added the onload attribute to the HTML <body> element and invoked the stopBack() function.
Example 3
In the example below, we have used the window.history.go() method to redirect users to the previous page. Whenever the web page loads, it will invoke the stopBack function, and it will redirect users to the previous page from the current page, and in this way, 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 to prevent users from going back to a particular web page. We used the window.history.forward() and window.history.go() method.
11K+ Views
