Disable Browser Back Button using jQuery

-

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to disable user from navigate to previous page using Back Button in Browser using jQuery. On the other hand the back button of the browser will be disabling.

For more Update Please follow us on our  Whtsapp Channel

For more Update Please follow us on our  Facebook Page

Implementation: In this article I am using two pages, name of first page will be login and name of the second page will be Home page. After login use will be redirect to the Home page. And when user will be redirected to the Home page the back button of the browser will be disable.

Disable Browser Back Button using jQuery

On the HTML page I will be use or place following function inside the Page where you want to prevent the User from coming back using Browser Back Button.

Here I am considering two pages, one will be Login page and other will be Home Page and once User redirect on the Home page after login, you would not want him to go to Login page. So you need to use following script inside the login page. Here I will call the disable_back function inside the  window.history.forward() method which navigates the browser forward one step in their history. when Browser Back Button will be  clicked by the user, 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.unload function returns null value.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript">

    function disable_back() {

        window.history.forward();

    }

    setTimeout("disable_back()", 0);

    $(window).on("unload", function () {

        null;

    });

</script>

 

 

Disabling Browser Back Button using jQuery

Login Page

On the HTML page named Login I will place an Anchor Tag and its href property ill 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.

<html>

<head>

    <title>Login</title>

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

</head>

<body>

    <h3>Login</h3>

    <br /><br />

    <a href="Home.htm">Redirect to Home</a>

</body>

</html>

 

Code of Home Page

The Home View consists of an HTML Anchor tag and its href property of the Anchor link is set to name of Login View.

 

<html>

<head>

    <title>Home</title>

</head>

<body>

    <h3>Home</h3>

    <br /><br />

    <a href="Login.htm">Click here for Login</a>

</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. And enjoy the execution of the whole concept.

Code of Login 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>Login</title>

    <style type="text/css">

        body { font-family: Arial; font-size: 10pt; }

        a, a:visited { color: Blue; }

    </style>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script type="text/javascript">

        function disable_back() {

            window.history.forward();

        }

        setTimeout("disable_back()", 0);

        $(window).on("unload", function () {

            null;

        });

    </script>

</head>

<body>

    <h3>Login Page </h3>

    <br /><br />

    <a href="Home.htm">Click here to open Home Page</a>

</body>

</html>

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>

</head>

<body>

    <h3>Home</h3>

    <hr />

    <a href="Login.htm">Click here to open Login Page</a>

</body>

</html>

Conclusion: In above code, I explained that about how to disable user from navigate to previous page using Back Button in Browser using jQuery. 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 article.

 

Regards

Using Asp.net

 

 

 

Comments

Post a Comment

Popular posts from this blog

Sending reset password link for one time use only in asp.net

-
Introduction: Hello developers, in this article i will explain that how we can create and send reset password link that will use onle one time in asp.net,after one time use this link will dispose and say that this link is wrong. This is very helpful article for every .net developer Implementation: Create two pages named forgetpassword.aspx and reset.aspx. Paste the code that below am giving, separately inside the both pages. This is a sample program you can change it accoring to your requirement. Inside your table there will be a colimn named code is necessary. Code for forgetpassword.aspx page: < head runat ="server">     < title > Forget Password </ title >     < style type ="text/css">         .style1         {             width : 100% ;  ...
Read more

add delete update inside gridview using store procedure in ASP.NET

-
Image
Introduction: Hello friends, in this article i will explain that how we can insert,delete,update the data in the gridview. Here i am using the store procedure to insert,delete and update the record. With the help of the store procedure the execution of the sql  query make fast. And less  the code of the aspx.cs page. So we can say  the use of the store procedure in the sql server is very important and also very helpful. Implementation: create a new website abb a page named gallery.aspx. Drag and drop the two textboxes, a fileuploader and a button from the toolbox named txt_album_name, txt_caption, fileuploader1 and btn_insert respectively. Here i am giving the complete code for the html page.  Code for .aspx page: < table class ="style1">         < tr >             < td class ="style2">      ...
Read more

Change password using asp.net

-
Image
Introduction : Hello friends, in this article i will explain that how we can change the password after login, in asp.net.This article is very useful for the all the .net developer. Implementation : create a new website add a page. Drag and drop three textboxes and two buttons   from the toolbox inside the   < body > body tag at the .aspx page.   Below   i am giving the complete code for the html page and .cs page.  Code for default.aspx page < div >     < table style =" width : 91% ; height : 97px ; " class ="tbl_reg_form">         < tr >             < td >                 Old Password </ td >             < td >        ...
Read more