In this article I will explain with an example, how to prevent user from navigate to previous page using back button of the browser or the back option in the context menu.
One cannot disable the browser back button functionality only thing that can be done is prevent them.
Disable Browser Back Button Script
The following JavaScript code snippet must be placed in the HEAD section of the Page where the User must be prevented from going back.
<script type="text/javascript" >
function preventBack(){window.history.forward();}
setTimeout("preventBack()", 0);
window.onunload=function(){null};
</script>
Disable Browser Back Button Implementation
For illustration purposes, two Pages are used Login and Home. After Login User is sent to Home page and using Browser Back button he will be prevented from going back to Login page from Home page.
Login Page
The HTML Markup of Login page consists of an HTML Anchor link to the Home page.
The Disable Browser Back Button Script is placed in the HEAD section so that User cannot access the Login page using Browser Back button from Home page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Login</title>
<script type="text/javascript">
function preventBack() { window.history.forward(); }
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>
</head>
<body>
<h3>Login</h3>
<hr />
<a href = "Home.htm">Redirect to Home</a>
</body>
</html>
Home Page
The HTML Markup of Home page consists of an HTML Anchor link to the Login page.
Note: HTML Anchor link is added to illustrate that the Login page will be prevented only using Browser Back button and not when accessed using other means.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
</head>
<body>
<h3>Home</h3>
<hr />
<a href="Login.htm">Redirect to Login</a>
</body>
</html>
Screenshots
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads