Detecting a "Back" Button Click

Occasionally, the question comes up about how to detect when a browser's "back" button is clicked.

With the gaining popularity of form auto-submission blocking software, the question has become more frequent.

Both the "type what you see in the image" CAPTCHA systems and the silent detection system employed by Master Form V4 restrict form submissions to once per page load. If the form is submitted and the "back" button clicked to submit the form again, the second submission fails.

When the use of the "back" button can be detected, the form user can be notified that a reload is necessary before the form can be used again.

I know of no way to detect the actual click on a browser's "back" button. However, certain events can be detected (page load, page unload, page re-focus) and, depending on which order they occur, determine with some certainty whether or not the "back" button was clicked.

This JavaScript displays an alert box whenever a "back" button click is spotted.

<script type="text/javascript">
<!-- Copyright 2007 Bontrager Connection, LLC
// http://BontragerConnection.com/

// Cookie's name may be changed.
var CookieName = "tempFocus";

// Change number of seconds if needed.
var PageLoadTimeSeconds = 3;

// Replace alert(...) in function HandleNewFocus(), below, 
//    with your custom "'back' button was clicked" handling.
function HandleNewFocus()
{
alert('It seems the "back" button was clicked.');
}

// No customizations required in the rest of this JavaScript.

var now = new Date();
var Milliseconds = parseInt(now.getTime() / 1000);
var CurrentCookie = new String();
var FocusLaunched = false;
var BackHandled = false;

function HandleCookie()
{
if(BackHandled) { return; }
BackHandled = true;
var beforemillis = parseInt(CurrentCookie);
if(beforemillis > 1) {
   var aftermillis = Milliseconds - beforemillis;
   if(aftermillis > PageLoadTimeSeconds) { HandleNewFocus(); }
	}
else { SetCookie('loaded'); }
}

function LoadFunctions()
{
CurrentCookie = GetCookie();
if(CurrentCookie == 'loaded') { return; }
HandleCookie();
SetCookie('loaded');
}

function Loaded() { LoadFunctions(); }

function Unloaded() { 
var again = new Date();
Milliseconds = parseInt(again.getTime() / 1000);
SetCookie(String(Milliseconds));
}

function Focused() {
if(FocusLaunched) { return; }
FocusLaunched = true;
LoadFunctions();
}

function SetCookie(v) {
CurrentCookie = v;
document.cookie = CookieName + '=' + v;
}

function GetCookie() {
var c_content = '';
if(document.cookie.length > 0) {
   var c_name = CookieName + '=';
   var c_begin = document.cookie.indexOf(c_name);
   var c_end = 0;
   if(c_begin > -1) {
      c_begin += c_name.length;
      c_end = document.cookie.indexOf(";",c_begin);
      if(c_end < c_begin) { c_end = document.cookie.length; }
      c_content = document.cookie.substring(c_begin,c_end);
      }
   }
return c_content;
}

window.onload = Loaded;
window.onunload = Unloaded;
window.onfocus = Focused;
</script>

It's not 100% accurate. For example, a page redisplay from cache uses the same measured events, in the same order, as a "back" button click. And JavaScript is required for the detection to work.

The JavaScript does not confuse a page reload from the server with the events triggered by a "back" button click -- provided the page load time is correctly specified (see below). Nor does it confuse an initial page load. The event sequence is different in those instances.

In the JavaScript, you can specify a different cookie name, if so desired.

Also, change the number of seconds it takes for your web page to load. Be a little generous so the JavaScript won't confuse slow connection reloads with a "back" button click.

As it stands, the JavaScript spawns an alert box when it detects a "back" button click. That alert can be replaced with an action or actions consistent with your requirements.

"Back" button click detection is now available.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Detecting a "Back" Button Click

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Detecting a "Back" Button Click

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions