Friday, August 27, 2010

Capturing window "close" action

I was presented with the task of capturing the event in which one of our users would hit the close browser button (you know, that little 'x' on the top right).  The business wanted me to give a warning to the user that his information was still not saved yet.

  I remembered a solution I did a couple of years ago where I simply added a before unload event to my body and some simple Javascript:

     
This works great... in IE, not in Firefox or Chrome though.  The problem is that IE tracks the clientY mouse position and the other browsers don't, so a different solution was needed.  I got some snippets off of the web for tracking mouse position and came up with this cross-browser solution and it works great. First, add the following Javascript to your page:
    


    

Next, add the following form to your page, this simply stores the mouse coordinates, you could use the var values, but I liked having these to debug and see what's happening.
   

That's it! Now you can warn users using any browser that they still have unsaved work. You will still need to monitor whether the page is dirty, etc, but this allows you to at least capture the event.

No comments: