How to Stop Browser Back Button Using JavaScript

Sometimes you may need to prevent your website users from going back to previous web page on their browsers by clicking the back button. This is especially true for checkout pages and pages where payment processing is going on. In this article, we will learn how to stop browser back button using JavaScript.

How to Stop Browser Back Button Using JavaScript

Here are the steps to stop browser back button using JavaScript. We will look at two ways to do this.

1. Method 1

We will create 2 html pages such that you can go to the second page by clicking a link on the first page. On the first page, we will add a JavaScript function which basically disables the back button. So when you click back button from second page, it will not go back to the first page. Create the first html page a.html.

<!DOCTYPE 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</h2>
	
	<p>
		Click here to Goto
		<a href="b.html">
			Link to second page
		</a>
	</p>
</body>

</html>

In the above HTML page, we have created a JavaScript code that automatically forces the browser to go forward to the next page, when back button is clicked. So when a user clicks the back button after clicking a link on this page, browser will forcefully bring them back to the second page, without going back to previous page.

Create the second html page b.html

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

Open a.html in web browser and click the link to go to b.html. Once b.html page is loaded, click back button. You will see that it is disabled.

2. Method 2

Here also we have the same approach. We create 2 html pages a.html and b.html. You can click a link on a.html to go to b.html. Once b.html is loaded users will not be able to go back to previous page using back button on browser.

Create a.html page.

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

In the above HTML page, we have added a JavaScript function preventBack() that forces the browser to go forward, instead of backward. It is called on page load.

Create b.html page.

<!DOCTYPE html>
<html>
	
<head>
	<title>Second Page</title>
</head>

<body>
	<h3>
		Second Page - Back Button
		is disabled here.
	</h3>
	<hr />
</body>

</html>

Open a.html page in web browser, click the link on it to go to b.html. Once b.html is loaded click back button on browser. You will see that the browser does not go back to previous page.

In this article, we have learnt how to stop browse back button to prevent it from going to the previous page. It is useful in case you don’t want to allow users from going back to previous page by clicking back button on their browsers, especially if there is a long running process going on in the back end.

How to Stop Browser Back Button Using JavaScript