;

How to stop the browser back button using JavaScript


Tutorialsrack 16/05/2021 Jquery Javascript

In this article, you will learn how to prevent the user from navigating back to the previous or last page using javascript. There are various ways to stop the browser back button using javascript.

Here are some examples to stop the browser back button using javascript.

Example 1: Using window.history.forward()

In this example, we used the window.history.forward() method to stop the browser back button.

Code 1: Save this file as Browser.html for the first-page
<!DOCTYPE html>
<html>
    <head>
        <title>
            Blocking Back Button using javascript
        </title>
    </head>

    <body style="text-align: center;">
        <h1><span style="color: purple;">Tutorials</span>rack</h1>

        <p style="color: purple; font-weight: bold;">
            Click here to Goto
            <a href="secondPage.html">
                Link to the second page
            </a>
        </p>

        <script type="text/javascript">
            window.history.forward();
            function noBack() {
                window.history.forward();
            }
        </script>
    </body>
</html>

Code 2: Save this file as secondPage.html for the second-page

<!DOCTYPE html>
<html>
    <head>
        <title>
            Blocking Back Button using javascript
        </title>
    </head>

    <body>
        <h3>This is our second page</h3>

        <p>
            On this page, back button functionality is disabled.
        </p>
    </body>
</html>

Example 2: Using window.history.forward() and window.onunload

Code 1: Save this file as Browser.html for the first page.

<!DOCTYPE html>
<html>
    <head>
        <title>
            Blocking Back Button using javascript
        </title>
    </head>

    <body style="text-align: center;">
        <h1><span style="color: purple;">Tutorials</span>rack</h1>

        <p style="color: purple; font-weight: bold;">
            Click here to Goto
            <a href="secondPage.html">
                Link to the second page
            </a>
        </p>

        <script type="text/javascript">
            function preventBack() {
                window.history.forward();
            }

            setTimeout("preventBack()", 0);

            window.onunload = function () {
                null;
            };
        </script>
    </body>
</html>
Code 2: Save this file as secondPage.html for the second page.
<!DOCTYPE html>
<html>
    <head>
        <title>
            Blocking Back Button using javascript
        </title>
    </head>

    <body>
        <h3>This is our second page</h3>

        <p>
            On this page, back button functionality is disabled.
        </p>
    </body>
</html>

I hope this article will help you to understand how to stop the browser back button using javascript.

Share your valuable feedback, please post your comment at the bottom of this article. Thank you!


Related Posts



Comments

Recent Posts
Tags