How to Disable an Back Button using JavaScript & HTML?

In this article, we will discuss how to disable the back button using HTML and Java Script. There are many methods to disable the browser's back button that are most popular, and they work in any situation. 

It is possible to add code to the previous or first page to make the browser move forward repeatedly to ensure that when a user attempts to return to the previous page, the browser will return him precisely the same way. 

This article will examine how to develop a Javascript function that will make it impossible for the user to go back to the previous or previous page.

How to disable browser's back button with JavaScript?



To disable web browsers’ back button, run the following code. This is the code for the current HTML page,

Example 1.

First create a firstpage.html

<html>
   <head>
      <title>Disable Browser Back Button</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   </head>
   
   <body>
      <a href = "newpage.html">Next Page</a>
   </body>
   <script>
      $(document).ready(function() {
         function disablePrev() { window.history.forward() }
         window.onload = disablePrev();
         window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
      });
   </script>
</html>

The following is the code for newpage.html

<!DOCTYPE html>
<html>
<head>
    <title>
        Blocking Back Button
        using javascript
    </title>
</head>
<body>
     <h3>This is second page</h3>
<p>
         On this page, back button
         functionality is disabled.
     </p>
</body>
</html>


More example coming soon. That’s it for today. If you have any queries, please feel free to ask in the comment section

Thank you for reading. Happy Coding..!! 🙂

Post a Comment

Previous Post Next Post