Disable Browser back button after Logout using JavaScript
Hello Guys, Welcome back Today, I am here with another new one great article. In this article I will explain with example, how to disable Back Button in Browser after Logout using JavaScript. 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.
Disable Browser Back Button JavaScript function
The below 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.onunload function returns null.
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () {
null
};
</script>
Disable Back button of Browser after Logout using JavaScript
For explaining I am using two Pages, first one is Home page and second one is Logout. After clicking logout button or logging out User is redirect to Logout page and using Browser Back button user will be put a stop from going back to Home page from Logout page.
Disabling Browser Back Button using jQuery
Home Page
On the HTML page named Home I will place an Anchor Tag and its href property it will be set to the name of Home Page. On the HTML page I will inherit the jQuery file named jquery.min.js at the end, the script or the function to disable the Browser Back Button will be placed inside the HEAD tag of HTML 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 milliseconds.
Finally, the window.onunload function returns null.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<script type="text/javascript">
function disable_backbtn() {
window.history.forward();
}
setTimeout("disable_backbtn()", 0);
window.onunload = 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>
Now here i am writing the complete code of the both HTML pages. You can copy the whole code and paste the whole code at your HTML page. You just need to delete the comment tags from starting and ending point of the pages, And enjoy the execution of the whole concept.
Code of Home page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
a, a:visited
{
color: Blue;
}
</style>
<script type="text/javascript">
function disable_backbtn() { window.history.forward(); }
setTimeout("disable_backbtn()", 0);
window.onunload = function () { null };
</script>
</head>
<body>
<h3>Home</h3>
<hr />
<a href="Logout.htm">Logout</a>
</body>
</html>
Code of Logout page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Logout</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
a, a:visited
{
color:Blue;
}
</style>
</head>
<body>
<h3>Logout</h3>
</body>
</html>
Conclusion: In above code, I explained that how to disable Back Button in Browser after Logout using JavaScript. This code is very helpful for every developer. Bye Bye and take care of you all Developers. We will come back shortly with the new attractive articles.
Regards
Using Asp.net
Comments
Post a Comment