Restrict or Disable Browser Back Button Using JavaScript

This is one JavaScript trick out of many, which is not advisable to use in websites, though very useful in terms of security and integrity of online data. Restricting or Disabling the Browser back button can be very annoying for users who might wish to go back to the previous page from the existing page.

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - No | Safari 5.1.4 - Yes

Also Read: How to Disable or Enable Submit Button using jQuery

It sometimes creates a bad rapport for the website, since users do not want to be restricted for their activities while browsing. However, it is always good for a web developer to know a trick or two, as it might sometimes help them maintain multiple web pages efficiently.

Many online banks restrict their users to click the refresh or back button, as it might hinder or stop a transaction in process. Doing so, the bank or the client might lose valuable data in the process.

In our example, we will use two simple HTML pages. The first page will call the second page using a link and in the process using JavaScript, we will restrict the user from getting back to the first page (from the second page) using the Browser back button.

The first page (page1.htm)

<html>
<head>
    <title>Disable Browser Back Button Using JavaScript</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">
        </script>
</head>
<body>
    <a href="Page2.htm">Click Here...</a>
</body>
<script>
    $(document).ready(function() {
        function disableBack() { window.history.forward() }

        window.onload = disableBack();
        window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
    });
</script>
</html>

The second page (page2.htm)

<html>
<body style="font-family:Arial;font-size:15px;">
    Click the browser back button <br /> or hit the <b>Backspace</b> key.
</body>
</html>

How does this work?

The script, which actually restricts the user from getting back to the first page from second page, will exists in the first page itself.

window.history.forward()

The above JavaScript function in the first page uses the history of the browser and forces it to navigate forward instead of going to the previous page. Therefore, every time the user clicks the back button or hits the backspace key, it will result in the Browser navigating or pushing the user forward and showing the same page (the page 2).

Does it really work?

While clicking the back button, you might have noticed that it does shifts the focus on the first page for a fraction. Therefore, does this script really make any sense?

Imagine a scenario where, one of your clients is filling up the registration form and has to fill many details before submitting it. However, in a rush hits the backspace key on the keyboard or clicks the Browser back button using a mouse.

Therefore, will clicking the Browser back button still ensures that the second page (page2.htm) will hold the data? To test this scenario, we will add a textbox to the second page and see if the data stays intact.

<div style="padding:20px 0;">
    <input type="text" />
</div>

Yes it works. Add more textboxes and check if it still works.

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - No | Safari 5.1.4 - Yes

Conclusion

There can be many ifs and buts to numerous scripts, which we write in our lifetime and there is no harm in knowing the exact functionalities and usage in our application. It might have some usefulness in the many applications we design.

← PreviousNext →

Restrict or Disable Browser Back Button Using JavaScript

Tools you can use