Reading Time: 3 minutes

1,568 Views

Inside this article we will see the concept i.e How To Disable Browser Back Button Using jQuery. Tutorial contains the classified information about disabling browser back button. This topic is quite interesting to learn.

In this tutorial we will use the concept of window object to get the browser state. This concept is very useful where you don’t want to give the back option to users.

Browser’s back button you will see at Top Left Corner.

Learn More –

Let’s get started.

Application Programming

Create a file index.html inside your project folder. Open index.html and write this following code into it.

<!DOCTYPE html>
<html>
<head>
    <title>How To Disable Browser Back Button Using jQuery Tutorial</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .disablebackbtn{
            margin-top:150px !important;
            padding:50px 20px !important;
            text-align: center;
            width: 50%;
            height: 50%;
            background:#ddd;
            border: 2px solid red;
        }
        .container p{
            font-size:25px;
            font-weight: bold;
        }
        .disable-btn {
            margin-top:50px !important;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        }
        .disable-btn:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
        }
    </style>
</head>
<body>  
    <div class="disablebackbtn mt-5 mx-auto">
        <div class="container">
            <p>How To Disable Browser Back Button Using jQuery Tutorial</p>
        </div>
  </div>
</body>
    <script type="text/javascript">
        $(document).ready(function() {
            window.history.pushState(null, "", window.location.href);        
            window.onpopstate = function() {
                window.history.pushState(null, "", window.location.href);
            };
        });
    </script>
</html>

Concept

Here, we have used the concept of javascript window object of browser.

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

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

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.