Keeping Up With Internet Explorer
I noticed something purely by accident the other day - as Firefox 0.9 there's been support for the onBeforeUnload event. Maybe this should teach me to read the release notes in more detail. Instead I found this one out when I happened to close a Firefox window and was asked if I really wanted to. Hang on I thought, how did it do that? So, I looked at the source and noticed the onbeforeunload event. Nice one. This is one of the most useful, yet often overlooked, features of IE. And now we can use it in Firefox.
I've known about this feature in IE for ages now. More than three years in fact. Remember I wrote an article about it called Remind users to save their forms? Back then Esther Strom (who's still reading!) asked for a Netscape equivalent. Well, it might be a little late Esther, but you're prayers are now answered!
Soon after writing this article Bob Mattler suggested an idea for an improvement. Why not check if any fields on the form have changed before deciding to prompt the user. Using this idea I wrote another article called Tracking changes to a form. Using the combination of the two articles it is possible to remind a user they have unsaved changes to the form they are in. Where as once this was yet another IE-only nicety, it is now cross-browser and a good reason to remind y'all of these two articles.
Note: As it stands the example form from the article doesn't work with Firefox. No fear - I've updated it and here is v2. I'll try and remember to update the article at some point.
It's funny that only yesterday the very same Esther was talking about Firefox's ability to change its user-agent string, so as to appear as if it were IE. This was in response to my using IE for certain tasks such as Internet banking. It used to be the case that they could warrant this insistence, as it meant they could then rely on such features. This is becoming less and less so, as is this case here with onbeforeunload, whereby Mozilla is doing a good job of keeping up with IE.
It's also funny how features like this, that would have once been berated as simply Microsoft executing its own plan for web domination, end up being adopted by both parties. Remember Favicons? Once upon a time this was IE-only and a major annoyance to webmasters. Now they're used widely by almost all browsers.
Wow, my name in lights! Thanks for today's blog. I tend to not use new browser features until they've been around for a while, because even with intranet applications, you can never be positive that everyone's on an updated browser. But I will definitely be using this one.
as far as i know, microsoft has participated with w3c and other companies (such as netiscape) to elaborate current recommandations, so that's no so surprising we can see some of their proprietary features now widely supported and almost standardized.
I was thinking the same thing, Esther. Man, I can really use this in a few situations.
Thanks, Jake!
The only trouble with onBeforeUnload is that it is also triggered by clicking on a link on the page (even if that link only executes a bit of javascript and doesn't actually move away from the page at all).
Damn!
You're right Ralph. That's why it's good that we can check all the fields on the form for changes before deciding whether to alert the user.
"...doesn't actually move away from the page at all". Are you sure about this? Is the JS you're talking about doing a refresh? Whatever the case, any prompts you decide to show the user are completely under your control. Trust me, this is a good thing.
Like Ralph I encountered the same problem. Did you already found a solution?
If you click a link that has href="javascript:...", it does trigger an onbeforeunload. The solution I found is to use href ="#" and put the javascript in the onclick.
Hey folks, stumbled upon this site and thought I'd help with a common problem people have with onbeforeunload, specifically Ralph and other's problem.
I have written a few web applications that needed the warning, but only when closing the browser, or clicking a bookmark, clicking home, entering a URL, that kind of thing. I didn't want to fire the event while I'm still in my web application, going from tab to tab and page to page.
So I created a frameset with one frame - the main page I start my application. Then, put the onbeforeunload on the frameset instead of the frame. This allows you to do anything inside the container of the frameset - in this case my application - without the onbeforeunload event firing. It's quite handy for reminding people they're gonna lose all their hard work.
I hope this helps someone - works out great for me.