JS

using javascript disable the browser back button

Here Laxmikant explain about using javascript disable the browser back button, In general, we don’t use this type of requirement in the project.But is very useful in so many places.

For example, we are doing in the online cart i.e an e-commerce platform like amazon flipkart and irctc book ticket time so here after the placing the order and once the user checks out the order in his cart and payment completed it will redirect and shown the order success page after that user doesn’t go back to the previous pages. So here we want to disable the browser back button.

Using javascript disable the browser back button script
The following JavaScript code must be write in the HEAD section of the Page where we want to prevent the User must from going back.

<script type="text/javascript">  
 (function (global) {   
   if(typeof (global) === "undefined") {  
     throw new Error("window is undefined");  
   }  
   var _hash = "!";  
   var noBackPlease = function () {  
     global.location.href += "#";  
     global.setTimeout(function () {  
       global.location.href += "!";  
     }, 50);  
   };  
   global.onhashchange = function () {  
     if (global.location.hash !== _hash) {  
       global.location.hash = _hash;  
     }  
   };  
   global.onload = function () {        
     noBackPlease();  
     // disables backspace on page except on input fields and textarea..  
     document.body.onkeydown = function (e) {  
       var elm = e.target.nodeName.toLowerCase();  
       if (e.which === 8 && (elm !== 'input' && elm !== 'textarea')) {  
         e.preventDefault();  
       }  
       // stopping event bubbling up the DOM tree..  
       e.stopPropagation();  
     };       
   }  
 })(window);  
 </script>

Here i am creating two html page for example Login Page and Home Page.After login user will easily go to home page and using browser back button he will be prevented from going back to home page to login page .In home page write javascript code for disable the browser back button.

Login Page: Markup Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Login</title>
    
</head>
<body>
    <h3>Login</h3>
    <hr />
    <a href="homepage.html">Redirect to Home</a>
</body>
</html>

Home Page :Markup Code

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
</head>
<body>
    <h3>Home</h3>
    <hr />
    <a href="Login.html">Redirect to Login</a>
</body>
</html>

Complete code of Home Page for using javascript disable the browser back button

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script type="text/javascript">

 (function (global) {
   if(typeof (global) === "undefined") {
     throw new Error("window is undefined");
   }
   var _hash = "!";
   var noBackPlease = function () {
     global.location.href += "#";
     global.setTimeout(function () {
       global.location.href += "!";
     }, 50);
   };
   global.onhashchange = function () {
     if (global.location.hash !== _hash) {
       global.location.hash = _hash;
     }
   };
   global.onload = function () {
     noBackPlease();
     // disables backspace on page except on input fields and textarea..
     document.body.onkeydown = function (e) {
       var elm = e.target.nodeName.toLowerCase();
       if (e.which === 8 && (elm !== 'input' && elm !== 'textarea')) {
         e.preventDefault();
       }
       // stopping event bubbling up the DOM tree..
       e.stopPropagation();
     };
   }
 })(window);
    </script>
</head>
<body>
    <h3>Home</h3>
    <hr />
    <a href="Login.html">Redirect to Login</a>
</body>
</html>

Output
using-javascript-disable-browser-back-button

using-javascript-disable-browser-back-button

Any question and suggestion related to this article please comment me. Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *