Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to stop browser's back button using JavaScript?
Stopping the browser's back button means preventing users from navigating to the previous page. Sometimes, we need to prevent users from going back from the current page for security purposes.
For example, most banking sites don't allow you to go back when you are doing transactions through online banking. If users go back mid-transaction, it can create issues. So, they only allow you to either complete the transaction or cancel it and start again.
Here, we will learn various approaches to prevent users from going back to the previous web page using JavaScript.
Using window.history.forward() Method
The window.history.forward() method redirects users forward in the browser history. When called, it moves the user to the next page in their history stack, effectively preventing them from using the back button to return to the current page.
Syntax
window.history.forward();
Example 1: Basic Implementation
In this example, we call window.history.forward() immediately when the page loads. This pushes users forward in their browser history, making it difficult to return to this page using the back button.
<html>
<head>
<title>Stop Back Button - Method 1</title>
</head>
<body>
<h2>Preventing the browser's back button using <i>window.history.forward()</i> method</h2>
<h3>Click the link below to test:</h3>
<a href="https://www.tutorialspoint.com/index.htm">Go to TutorialsPoint</a>
<p>Try using the back button after clicking the link - you won't be able to return to this page.</p>
<script>
window.history.forward();
</script>
</body>
</html>
Example 2: Delayed Implementation
This example uses setTimeout() to call window.history.forward() after a delay. This approach can be useful when you want to give users time to read content before preventing back navigation.
<html>
<head>
<title>Stop Back Button - Method 2</title>
</head>
<body>
<h2>Preventing the browser's back button with delay</h2>
<h3>Click the link below:</h3>
<a href="https://www.tutorialspoint.com/index.htm">Go to TutorialsPoint</a>
<p>Back navigation will be blocked after 2 seconds.</p>
<script>
setTimeout(() => {
window.history.forward();
}, 2000);
</script>
</body>
</html>
Using window.history.go() Method
The window.history.go() method navigates to a specific page in the browser history. When called with parameter 1, it moves forward one page, similar to history.forward().
Syntax
window.history.go(1); // Move forward 1 page
Example 3: Using onload Event
This example demonstrates using window.history.go(1) with the onload event to prevent back navigation as soon as the page loads.
<html>
<head>
<title>Stop Back Button - Method 3</title>
</head>
<body onload="preventBack();">
<h2>Preventing the browser's back button using <i>window.history.go()</i> method</h2>
<h3>Click the link below:</h3>
<a href="https://www.tutorialspoint.com/index.htm">Go to TutorialsPoint</a>
<p>This page prevents back navigation using the onload event.</p>
<script>
function preventBack() {
window.history.go(1);
}
</script>
</body>
</html>
Using pushState() Method (Modern Approach)
A more modern approach uses history.pushState() combined with the popstate event to detect and prevent back navigation attempts.
<html>
<head>
<title>Stop Back Button - Modern Method</title>
</head>
<body>
<h2>Preventing back button using pushState() method</h2>
<p>This page uses a modern approach to prevent back navigation.</p>
<a href="https://www.tutorialspoint.com/index.htm">Go to TutorialsPoint</a>
<script>
// Push a state to history
history.pushState(null, null, location.href);
// Listen for popstate event (back button)
window.onpopstate = function () {
history.go(1);
};
</script>
</body>
</html>
Comparison of Methods
| Method | Reliability | Browser Support | User Experience |
|---|---|---|---|
history.forward() |
Good | All browsers | May cause confusion |
history.go(1) |
Good | All browsers | Similar to forward() |
pushState() + popstate |
Better | Modern browsers | More controlled |
Important Considerations
User Experience: Disabling the back button can frustrate users and should only be used when absolutely necessary for security or functional reasons.
Accessibility: These methods may interfere with screen readers and other assistive technologies that rely on standard browser navigation.
Alternative Solutions: Consider using session management, form tokens, or page state validation instead of completely blocking navigation.
Conclusion
While JavaScript provides several methods to prevent back button functionality, use these techniques sparingly and only when essential for security. The modern pushState() approach offers better control and user experience compared to traditional history.forward() methods.
15K+ Views
