Sometime we have requirement in developing a website to disable the back button effect from browser. This is common in sites where security is of principal concern. Please note we cannot disable the browser back button functionality from users machine only thing that can be done is prevent them.
In the following example I am having one HTML page Disable.html and when user click on link (Visit Google Home Page), will be directed to Google Home page. but if the user tries to go back from Google page we will prevent the browser back button using JQuery.
<!doctype html>
<html>
<head title=”DisableBack”>
< script src=`https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js` >
< /script >
< script type=”text/javascript” >
$(document).ready(function () {
window.history.forward(1);
});
“< /script >”
</head>
<body>
<div>
< h1 > Disable Browser Back Button Functionality Using JQuery </ h1 >
< a href=`http://www.google.com/` > Visit Google Home Page < /a >
< /div >
< /body >
< /html >
The above highlighted function in the HTML 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 Google home page.
You may want to warn user if back button is pressed so that user doesn’t lose their unsaved data then please add the following snippets in script tag of the page.
$(window).bind(“beforeunload”, function () {
return “Back button has disabled for this form”;
});
Thanks!! 🙂 🙂
Kavita Mishra 