How To Disable Browser Back Button using JQuery?

26-Mar-2021

.

Admin

How To Disable Browser Back Button using JQuery?

Now let's see example of how to disable browser back button using jquery. In this example i will show you disable browser back button in jquery. we can use window.history.pushState for restrict back button of browser in jquery. we can disable back button in browser using jquery in php or any mvc framework like laravel, codeigniter etc.

If you need to restrict back button function in your browser because of security. so no one can access that page with back button then you can use bellow example.

I will give you simple example to disable browser back button in js, so you can run js code in your local system and see it. Just see bellow example:

Example :


<!DOCTYPE html>

<html>

<head>

<title>How to disable browser back button using Jquery? - NiceSnippets.com</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? - NiceSnippets.com</p>

<button class="btn btn-success border-danger disable-btn mt-4 ml-3">click on browser back button</button>

</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>

It will help you....

#Jquery