How to Stop the Browser From Going Backward

Introduction

This article explains how to stop the browser from going backward.

In our applications we encounter a common problem when the user clicks on the back button of the browser to return to the previous page and similarly he might go out of his session and may become logged out, you can prevent this type of condition by not allowing the user to go back but allowing him to go forward.

Use the following procedure to create a sample showing how to do that.

Step 1

First of all you need to add an external jQuery-1.9.1.js file to your application, you can either fetch it from the Zip File available at the beginning of this article or you can download it from another site.

After downloading this file attach it your application and call it in the head section of your application.

Disable Browser Back Button

<head runat="server">

    <title></title>

        <script src="jquery-1.9.1.js"></script>

</head>

Step 2

Then I added two more WebPages to my application, so now my application has three webpages in it.

I will add a button on page "one" that will redirect it to page 2.

<div>

    <asp:Label Text="Go To Page 2:-" ForeColor="Red" Font-Size="18px" runat="server"></asp:Label>

    <asp:Button Text="Click Me" PostBackUrl="~/WebForm2.aspx" runat="server" />

</div>

As you can see that I have added a button and in the click event it will redirect to Page Two.

Now I will add another button on Page Two that will redirect to Page Three.

    <div>

    <asp:Label ForeColor="Red" Font-Size="18px" Text="This Page Will Not Allow You To Back" runat="server"></asp:Label>

        <br />

        <br />

        <asp:Label ForeColor="Blue" Font-Size="18px" Text="You can go to Page 3" runat="server"></asp:Label>

          

        <asp:Button runat="server" PostBackUrl="~/WebForm3.aspx" Text="Page 3" />

    </div>

As you can see that I have taken a Label that is showing that this page will not allow the user to go back so I'll make this page prevent a go back.

Step 3

Now we will again go back to the page one and will do our final work of not letting the user to return to page one from page two by clicking on the back button. For that you need to add this code in the head section:

<head runat="server">

    <title></title>

        <script src="jquery-1.9.1.js"></script>

    <SCRIPT type="text/javascript">

        window.history.forward();

        function noBack() {

            window.history.forward();

        }

</SCRIPT>

</head>

Here I had created a function in which I had written "window,history.forward();". This code will not allow the user to return to Page One from Page Two by clicking on the browser's back button.

You need to call this function on the Page Load of Page One:

<body onload="goBack();">

Now your application is created and it's ready to be executed.

Output

First of all you will get an output like this one:

Disable Browser Back Button

Here if you click on the Button then it will redirect to Page Two.

Disable Browser Back Button

Now if you click on the back button of the browser then you will not be allowed to go back.

Disable Browser Back Button

But if you click on the button then the page will be redirected to Page 3.

Disable Browser Back Button


Similar Articles