How to Stop Browser Back Button using JavaScript ?
Last Updated :
12 Jul, 2025
The browser back button allows users to go back to the previous page in their browsing history. It is an essential navigation feature, but there are times when you might want to prevent users from leaving a page.
Here are several methods to prevent or control back navigation using JavaScript.
1. Redirecting User to the Same Page
This method involves pushing a new state to the history stack so that when the user attempts to use the back button, they are brought back to the same page. Using history.pushState() prevents the user from navigating back by adding a new history state.
FirstPage.html
<html>
<head>
<title>
Blocking Back Button
using javascript
</title>
<style type="text/css">
body {
font-family:Arial;
color:green;
}
</style>
<script type="text/javascript">
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
Click here to Goto
<a href="b.html">
Link to second page
</a>
</p>
</body>
</html>
<html>
<head>
<title>
Blocking Back Button
using javascript
</title>
</head>
<body>
<h3>This is second page</h3>
<p>
On this page, back button
functionality is disabled.
</p>
</body>
</html>
Output:
In this example
- window.history.forward(): Prevents the user from using the back button by forcing the browser to go forward in the history stack.
- noBack() function: Continuously disables the back button by calling history.forward().
- Link: Provides a link to b.html (the second page).
- Displays a message informing the user that the back button functionality is disabled on this page.
2.Disable Back Navigation Using a Loop
Another way to prevent back navigation is by trapping the user in a loop where the browser continuously redirects them to the current page. Loop Redirection method creates a loop that traps the user on a particular page by continuously redirecting them if they attempt to navigate back.
FirstPage.html
<html>
<head>
<title>First Page</title>
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>
</head>
<body>
<h3>This is first page</h3>
<hr />
<a href = "b.html">Goto second Page</a>
</body>
</html>
<html>
<head>
<title>Second Page</title>
</head>
<body>
<h3>
Second Page - Back Button
is disabled here.
</h3>
<hr />
</body>
</html>
Output:
In this example
- preventBack() function: Uses window.history.forward() to block the back button.
- setTimeout("preventBack()", 0): Calls the preventBack() function immediately after the page loads.
- window.onunload = function () { null }: Prevents any actions when the page is unloaded (e.g., when trying to navigate away).
- Provides a link to navigate to b.html (second page).
- Displays a message informing the user that the back button is disabled on this page.
3. Using onbeforeunload Event
The onbeforeunload event can be used to prompt the user with a confirmation message when they try to leave the page, whether by clicking the back button, closing the tab, or navigating to a new URL.
FirstPage.html
<html>
<head>
<title>First Page</title>
</head>
<body>
<h3>Welcome to the First Page</h3>
<hr />
<a href="secondPage.html">Go to Second Page</a>
<script type="text/javascript">
window.onbeforeunload = function () {
return "Are you sure you want to leave this page?";
};
</script>
</body>
</html>
Output
How to Stop Browser Back Button using JavaScriptIn this example
- When the user tries to leave the page (either by closing the tab, navigating away, or using the back button), a confirmation message will appear.
- The message asks, "Are you sure you want to leave this page?" to warn the user about leaving.
- The page contains a link that navigates the user to secondPage.html.
4. Using hashchange Event
Another way to prevent back navigation is by manipulating the URL hash and using the hashchange event. This technique is often used in Single Page Applications (SPAs) to control navigation without full page reloads.
FirstPage.html
<html>
<head>
<title>First Page</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
text-align: center;
}
.container {
margin-top: 50px;
}
h3 {
margin-bottom: 20px;
}
a {
font-size: 18px;
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h3>Welcome to the First Page</h3>
<hr />
<a href="secondPage.html">Go to Second Page</a>
</div>
<script type="text/javascript">
window.onbeforeunload = function () {
return "Are you sure you want to leave this page?";
};
</script>
</body>
</html>
<html>
<head>
<title>Second Page</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
text-align: center;
}
.container {
margin-top: 50px;
}
h3 {
margin-bottom: 20px;
}
a {
font-size: 18px;
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h3>Welcome to the Second Page</h3>
<hr />
<a href="firstPage.html">Go to First Page</a>
</div>
<script>
window.onhashchange = function () {
window.location.hash = '#stay-here';
};
window.location.hash = '#second-page';
</script>
</body>
</html>
Output
In this example
- window.onbeforeunload shows a confirmation dialog when the user tries to leave the page, asking "Are you sure you want to leave this page?".
- Link navigates to secondPage.html.
- Same structure as First Page, with the same onbeforeunload confirmation.
Below are the some limitations of stopping the back button:
- No Direct Control:JavaScript cannot directly stop the back button in all browsers. The methods provided only serve as workarounds.
- Browser Restrictions: Modern browsers are becoming more restrictive about blocking the back button or showing custom prompts. For example, Chrome and Firefox often ignore custom messages in the confirmation dialog.
- User Experience: Overusing these techniques can frustrate users, especially if it prevents them from navigating freely. It's essential to use these methods carefully and sparingly.
Conclusion
While it's impossible to directly disable the browser back button in JavaScript, there are various techniques to control or block its behavior, depending on the use case. Methods like onbeforeunload,history.pushState(), and the hashchange event can help developers manage user navigation and ensure that important actions, like form submissions or multi-step processes, are not lost.
Similar Reads
How to redirect browser window back using JavaScript ? Redirecting a browser window back to the previous page using JavaScript is a common task for web developers looking to enhance user navigation. This guide will cover the simple yet important methods available in JavaScript to achieve this functionality, ensuring a smooth user experience. There are s
2 min read
How to make browser to go back to previous page using JavaScript ? There are two popular methods to navigate a browser back to the previous page. These methods allow easy navigation in a web session's history, offering simple and effective ways to move backward or forward through a user's browsing history.These are the following two ways: Table of ContentUsing hist
3 min read
How to Disable Browser Back Button using jQuery ? While working with some privacy-related projects, we have to make sure that our programming doesn't have any kind of loopholes. In this article, we will see how we can disable the back button of the browser intentionally so that users cannot get back and access the content. We have many scenarios wh
2 min read
How to close current tab in a browser window using JavaScript? In this article, we will see how to close the current tab in a browser window using JavaScript. window.close() methodTo make this, we will use window.close() method.  This method is used to close the window which is opened by the window.open() method. Syntax:window.close();But accounting for a secur
1 min read
How to handle Backward & Forward Buttons using JavaScript ? In this article, we will see how to control the backward & forward buttons of the browser using Javascript, along with understanding its implementation through the illustrations. The forward button is used to go to the next page while the back button is used to go to the previous page. The forwa
3 min read
How to Get Browser to Navigate URL in JavaScript? As a web developer, you may need to navigate to a specific URL from your JavaScript code. This can be done by accessing the browser's window object and using one of the available methods for changing the current URL.In JavaScript, there are several approaches for navigating to a URL. The most common
4 min read