The IE onBeforeUnload Event Handler

JavaScript 1.0 (Navigator 2) introduced the onUnload event handler, used to execute statements whenever the unload event occurs in a web page. The unload event fires when the user exits a document. Here at DHTML Lab, we have used it to reset variables in our Hierarchical Menus script. We first explored its use in our discussion of Version 3 of the menu script.

One thing the onUnload handler cannot do, however, is cancel itself, allowing the user to avoid the page exit.

Enter the onBeforeUnload handler. The beforeunload event fires just before the unload event. Its sole purpose is to allow users to change their minds about exiting the page. That is, to cancel the upcoming unload event.

Arrogant? No!

Your first thought might be:

"What a useless and inherently arrogant approach to Web page design. It contradicts the very essence of the Web: freedom to surf without structure and interference."

This is true, if the Web page is a Web page. What if it's a Web application?

In the case of a Web application, this event handler is a must. A Web application is a Web page that looks and acts like an OS program. It is interactive. It may collect information from a user. It certainly has different states. Take the simplest example: a game, like our DHTML Puzzle. The user is half-way through the game. Inadvertently, he/she clicks the mouse button, without noticing its position on the screen. Suddenly, they are on a new page, or the window has been closed. The game has to be replayed. I'm sure this has happened to all of us. Maybe not on the Web, but certainly in an OS application. We, of course, never blame ourselves, we blame the program designers:

"Why didn't they warn me?!"

That's the reason this DHTML Diner entreé is part of the Creating a Web Application thread.

Syntax

The onBeforeUnload handler applies to the window object only, whether window is a regular document or a frameset document. It can only be set in a script, not in an HTML tag:

window.onbeforeunload = bunload;

function bunload(){
    statements to execute
}

In the example above, the function called bunload() is called when the beforeunload event fires. Any statements in bunload() are executed before the unload event and the page exit. In this form, it does not differ from the unload event handling, which also executes statements before page exit.

What makes it unique is the optional return statement that causes the built-in dialog to be displayed:

window.onbeforeunload = bunload;

function bunload(){
    statements to execute
    return "custom message";
}

If the return statement returns a string, the dialog box appears, displaying the string specified. On the next page, we'll look at the dialog in detail.