How To Disable Browser Back Button Using Javascript

Share this Article
Reading Time: 3 minutes
552 Views

Inside this article we will see the concept i.e How To Disable Browser Back Button Using Javascript. Article contains the classified information about Disable Browser Back Button Functionality using JavaScript.

Sometimes in web application for web pages we need that Back button of browser should not work, disable for users to go back once it will be opened. Like a payment page. So, if you are looking for a solution i.e How to Stop Browser Back Button Using JavaScript, then article is totally for you to learn and see how to do it.

Learn More –

Let’s get started.

Application Programming

Let’s create a folder with name disable-back in your localhost directory. In this project folder, create a file: index.html

Open index.html and write this complete code into it.

<!DOCTYPE html>
<html>

<head>
    <title>How To Disable Browser Back Button Using Javascript</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <h3>Disable Browser Back Button Using Javascript</h3>

    <button onclick="disableBackButton()">Click to Disable</button>

    <span id="message" style="margin-top:10px;display:block;color:green;"></span>

</body>

<script type="text/javascript">
    function disableBackButton() {

        window.history.pushState(null, "", window.location.href);
        window.onpopstate = function() {
            window.history.pushState(null, "", window.location.href);
        };

        $("#message").text("Successfully!, Browser back button disabled").delay(2000).fadeOut(1000);
    }
</script>

</html>

Concept

Here, inside this code you have a button.

Once you click on it, it will disable the back button of browser. This is the actual code for this article concept.

window.history.pushState(null, "", window.location.href);
window.onpopstate = function() {
    window.history.pushState(null, "", window.location.href);
};

Application Testing

Open your browser.

Next,

Your project URL will be like this.

URL: http://localhost/disable-back/index.html

It gives the interface where when you click on button, it will disable the browser’s back button.

We hope this article helped you to learn How To Disable Browser Back Button Using Javascript in a very detailed way.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Was this post helpful?

Get PHP Web Development Courses on Offer in just ₹299
Get PHP Web Development Courses on Offer in just ₹299