WWW FAQs: How do I keep the user from leaving the page?

2007-03-12: In most cases, preventing the user from leaving the web page is obnoxious and counterproductive. And impossible, too.

But sometimes, in a web application such as an online banking system, users really do enter a great deal of information that they would hate to lose. And if they exit the page too soon, perhaps by accessing a bookmark or accidentally clicking on the "back" or "close" button, there can be negative consequences for the user... like losing a 20-page essay they've just typed in.

How to Give The User A Chance To Change Their Mind

Can you prevent the user from closing a window or otherwise leaving the current page? Not completely. All major web browsers forbid you from trapping the user on the page forever. This is a good thing.

However, you can force the browser to display a warning message and give the user a chance to change her mind. And that's a good way to prevent users from accidentally throwing away their hard work in a complex web application, such as an income tax filing system. Reasonably recent versions of Internet Explorer, Firefox, and Safari all support this useful feature.

You may find older web pages that claim Safari doesn't support the technique I'm about to describe, but my testers found that it worked fine in current releases of MacOS X and Safari. It's true that some earlier versions of Safari do not support it.

You can display such a warning message by setting up a JavaScript handler for the onBeforeUnload event. Any text you return from this function will be displayed to the user— along with a standard message from the browser that ensures that you can't mislead the user about what is really happening. The user is then given a chance to click "OK" to leave the page anyway or "Cancel" to stay put. For legitimate web applications, this is a great solution. For jerks who want to force us to look at popup ads all day... sorry, Charlie!

Here's an example of a web page that features the popup message. When the user tries to leave the page by any method, the warning message appears if the workIsDone variable has not been changed to true. We set workIsDone to true when the user clicks on the "File My Taxes" button. In a real web application, of course, we would actually submit information to the web server at this point.

If you don't set workIsDone before following them, your own links and form submission buttons will also display the warning. So be sure to do that via an onClick handler.


<html>
<head>
<script>
var workIsDone = false;

window.onbeforeunload = confirmBrowseAway;

function confirmBrowseAway()
{
  if (!workIsDone) {
    return "Are you sure you want to do that? If you leave this page " +
    "now, your work will NOT be saved!";
  }
}

function fileMyTaxes()
{
  // The user has finished their work, so we don't
  // need a warning anymore!
  workIsDone = true;
}
</script>
</head>
<body>
<h1>File Your Taxes</h1>
<input type="submit" value="File My Taxes Now" onclick="fileMyTaxes()" />
</body>
</html>

For more information about the onbeforeunload event, see this excellent article by 4guysfromrolla.

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.