In this article I will explain with an example, how to disable back button in Browser after Logout using
jQuery.
Disabling Browser Back Button will prevent user from navigate to previous page after Logout 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 going back.
Disable Browser Back Button using jQuery
The following function must be placed inside the Page where you want to prevent the User from coming back using Browser Back Button.
For example, consider two pages, Login and Home and once User lands on the Home page, you would not want him to go to Login page. Thus, the following script must be placed inside the Login page.
Inside the preventBack function, the window.history.forward() method is called which navigates the browser forward one step in their history. Whenever Browser Back Button is clicked, this function immediately moves it one step forward.
The setTimeout method schedules the execution time of the preventBack function with delay of 0 (zero) milliseconds.
Finally, the
window.onload function of
jQuery returns NULL.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
$(window).on("unload", function () {
null;
});
</script>
Disabling Back button in Browser after Logout using jQuery
For illustration purposes, two Pages are used Home and Logout. After logging out User is sent to Logout page and using Browser Back Button he will be prevented from going back to Home page from Logout page.
Home Page
The HTML Markup of Home page consists of an HTML Anchor tag and its href property of the Anchor tag is set to path of Logout page.
Disabling Browser Back Button Script
Inside the HTML Markup, first the following script file is inherited.
1. jquery.min.js
Finally, the script to disable the Browser Back Button is placed inside the HEAD section.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
$(window).on("unload", function () {
null;
});
</script>
</head>
<body>
<h3>Home</h3>
<hr />
<a href="Logout.htm">Logout</a>
</body>
</html>
Logout Page
The HTML Markup of Logout page consists of an H3 tag for displaying message.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Logout</title>
</head>
<body>
<h3>Logout</h3>
</body>
</html>
Screenshot
![Disable Back Button in Browser after Logout using jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
