How to disable browser\'s BACK Button (across browsers)?
I also had the same problem, use this Java script function on head tag or in , its 100% working fine, would not let you go back.
<script type = "text/javascript" >
function preventBack(){window.history.forward();}
setTimeout("preventBack()", 0);
window.onunload=function(){null};
</script>
Globally, disabling the back button is indeed bad practice. But, in certain situations, the back button functionality doesn't make sense.
Here's one way to prevent unwanted navigation between pages:
Top page (file top.php
):
<?php
session_start();
$_SESSION[pid]++;
echo "top page $_SESSION[pid]";
echo "<BR><a href='secondary.php?pid=$_SESSION[pid]'>secondary page</a>";
?>
Secondary page (file secondary.php
):
<?php
session_start();
if ($_SESSION[pid] != $_GET[pid])
header("location: top.php");
else {
echo "secondary page $_SESSION[pid]";
echo "<BR><a href='top.php'>top</a>";
}
?>
The effect is to allow navigating from the top page forward to the secondary page and back (e.g. Cancel) using your own links. But, after returning to the top page the browser back button is prevented from navigating to the secondary page.
IF you need to softly suppress the delete and backspace keys in your Web app, so that when they are editing / deleting items the page does not get redirected unexpectedly, you can use this code:
window.addEventListener('keydown', function(e) {
var key = e.keyCode || e.which;
if (key == 8 /*BACKSPACE*/ || key == 46/*DELETE*/) {
var len=window.location.href.length;
if(window.location.href[len-1]!='#') window.location.href += "#";
}
},false);
Try this code. You just need to implement this code in master page and it will work for you on all the pages
<script type="text/javascript">
window.onload = function () {
noBack();
}
function noBack() {
window.history.forward();
}
</script>
<body onpageshow="if (event.persisted) noBack();">
</body>
Others have taken the approach to say "don't do this" but that doesn't really answer the poster's question. Let's just assume that everyone knows this is a bad idea, but we are curious about how it's done anyway...
You cannot disable the back button on a user's browser, but you can make it so that your application breaks (displays an error message, requiring the user to start over) if the user goes back.
One approach I have seen for doing this is to pass a token on every URL within the application, and within every form. The token is regenerated on every page, and once the user loads a new page any tokens from previous pages are invalidated.
When the user loads a page, the page will only show if the correct token (which was given to all links/forms on the previous page) was passed to it.
The online banking application my bank provides is like this. If you use the back button at all, no more links will work and no more page reloads can be made - instead you see a notice telling you that you cannot go back, and you have to start over.
The problem with Yossi Shasho's Code is that the page is scrolling to the top every 50 ms. So I have modified that code. Now its working fine on all modern browsers, IE8 and above
var storedHash = window.location.hash;
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
function restoreHash() {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}
if (window.addEventListener) {
window.addEventListener("hashchange", function () {
restoreHash();
}, false);
}
else if (window.attachEvent) {
window.attachEvent("onhashchange", function () {
restoreHash();
});
}
$(window).load(function () { changeHashOnLoad(); });