Q311 How do I disable the "Back" button of a browser?
You are here: irt.org | FAQ | JavaScript | History | Q311 [ previous next ]
Easy answer - you can't.
Longer answer - you cannot totally remove the ability for the user to go back to the previous location, although you can make it harder.
1) You can use the location replace method when changing the location. This replaces the current history location with the new location. However older browsers do not support this method, which is why it is required to test for the images object:
<script language="JavaScript"><!--
if (document.images)
location.replace('http://www.somewhere.com/apage.html');
else
location.href = 'apage.html';
//--></script>
Note: in Opera replace() will work, but only with absolute URL's.
2) You can load the new location into another window, and then close the old window:
In the first page:
<script langauge="JavaScript"><!--
function newWindow(fileName,windowName) { msgWindow=window.open(fileName,windowName); }
//--></script>
<a href="javascript:newWindow('1.html','window1')">Open Window</a>
In the next window:
<script language="JavaScript"><!--
function newWindow(fileName,windowName) { msgWindow=window.open(fileName,windowName); }
function replaceURL(fileName) { newWindow(fileName,'window2'); self.close(); }
//--></script>
<a href="javascript:replaceURL('2.html')">change location</a>
3) You can open a window without a toolbar:
<script language="JavaScript"><!--
msgWindow=window.open('apage.html','windowName','toolbar=no');
//--></script>
However, this does not totally stop the user from being able to go back to the previous page.
4) You can add code to the previous page to force the browser to go forwards again:
<script language="JavaScript"><!-- javascript:window.history.forward(1); //--></script>
The following was submitted by Daniel Amsler
There is no direct way to catch the back button event, but there is a work around by using the onUnload function in combination with catching all other user events with JavaScript (see example below)
========================================================================================
CATCHING THE EVENT OF A USER PRESSING THE BACK BUTTON ON A HTML PAGE BY USING JAVASCRIPT
========================================================================================
<html>
<head>
<meta ....>
</head>
<body bgcolor="#FFFFFF" ONLOAD="document.form2.list01.focus()" onUnload="goBack()">
<SCRIPT language="JavaScript">
var backButtonPressed = 1;
<!-- 0=no / 1=yes (assume per default that the back button will be pressed -->
<!-- and come into action if this was NOT the case) -->
function sortList() {
backButtonPressed=0;
document.form2.hiddenFieldName.name='sortButton';
<!-- activate sortButton to pass its activation status to the servlet -->
<!-- (sorting will be done by the servlet) -->
document.form2.submit();
}
function printSelectedEntry() {
backButtonPressed=0;
document.form2.hiddenFieldName.name='printButton';
<!-- activate printButton to pass its activation status to the servlet -->
<!-- (printing will be done by the servlet) -->
document.form2.submit();
}
function cancel() {
backButtonPressed=0;
document.form2.hiddenFieldName.name='cancelButton';
<!-- activate cancelButton to pass its activation status to the servlet -->
<!-- (the cancel button will be handled by the servlet) -->
document.form2.submit();
}
function help() {
backButtonPressed=0;
document.form2.hiddenFieldName.name='helpButton';
<!-- activate helpButton to pass its activation status to the servlet -->
<!-- (the help button will be handled by the servlet) -->
document.form2.submit();
}
function goBack() {
if (backButtonPressed == 1) {
backButtonWasPressed();
}
}
function backButtonWasPressed() {
<!-- do whatever you want, e.g. call your implementation of the cancel button -->
<!-- (which is not necessarily going back to the previous page) -->
cancel();
}
</SCRIPT>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
--> display list01 (list with several entries)
</tr>
</table>
<form action="{SYS_URL}" method="POST" name="form2">
<input type="button" name="sortButton" value="Sort List" onClick="sortList()">
<input type="button" name="printButton" value="Print" onClick="printSelectedEntry()">
<input type="button" name="cancelButton" value="Cancel" onClick="cancel()">
<!-- hidden field's NAME parameter will be set to the function selected by the user before submitting the page -->
<input type="hidden" NAME="hiddenFieldName" VALUE="">
</form>
</body>
</html>