Hey, it’s a long time I haven’t posted anything here again. So today I’m going to share a very simple trick in javascript.

In the course of writing a webApp, I wanted the user to be alerted * whenever * closing the window containing the app.

window.onBeforeUnload is the event to use but this event is being triggered every time the window unloads, that means even if clicking on links or submitting a form in your page.

So here is how I delt with this little issue: we dont want to alert the user as long as the navigation is internal to the app. But we want to alert if closing the window.

in the head section of your page, early after including the jquery library, insert the following script:

/* Declare a global bool */

navAwayFromClick = false;

/* onBeforeUnload event happens every time the page changes location */

window.onbeforeunload = function(e)
{
 /*
   - Check if we are navigating away from the page since we clicked
      either a button or a link
   - Returns a message to present to the user.
*/

   if (false == navAwayFromClick) return closingAlert(e);
}

function closingAlert(e)
{
    var message = 'Are you sure you want to leave this page ?';

   /* for consistency across browsers */

   if (typeof e == 'undefined') {
      e = window.event;
    }
    if (e) {
      e.returnValue = message;
    }
    return message;
}

/*
Use jQuery to select all clickable elements, and bind a function to
them that will change the state of our gloobal boolean. This way we
know we are exiting the page after a click action.
The $("...").click(...) does not prevent default behavior of the click.
Up to you to trigger the same on other clickable elements.
*/

jQuery(document).ready(function()
{
  jQuery("a").click(function(e)
  {
    navAwayFromClick = true;
  });

  jQuery("form").submit(function()
  {
    navAwayFromClick = true;
  });
});

And that should work as expected, at least I tested it in Safari 5 and FireFox 3.6. If anyone cares about IE, let me know if it works.