window.unbeforeunload show div IE7 problem

Question

Currently I am developing a web application for which I am using a preloader icon. What I want is that the preloader becomes visible every time the user navigates to another page or refreshes the page. So far I have the following solution:

window.onbeforeunload = function() { $("applicationdisabler").show(); };

For Safari and Firefox it works fine when the user clicks a link or refreshes the page. However in IE7 the div only becomes visible when the user clicks a link and NOT when the user refreshes the page.

The user can refresh the page by hitting F5 (on Windows) or any other possible way the browser provided.

Of course I have been looking for some work arounds already. The following code shows the alert in IE7, but the div still doesn't become visible.

window.onbeforeunload = function() { $("applicationdisabler").show(); alert("come on!"); };

The code of my div:

<div id="applicationdisabler"><img src="images/preloader.gif" /></div>

Hopefully someone can help me out.

Answer 1

Why not use just use the onLoad listener instead? Although it would be slightly slower it should be more reliable.

Actually after a bit of looking around I'm not sure modifying the DOM makes any sense unless the onBeforeUnload handler returns false first - i.e. forces the user to stay on the same page.

As I understand it the onBeforeUnload event is fired just before the page is unloaded, so if you don't return false the browser will unload the page and DOM, and any JavaScript executed after that will be pointless.

That doesn't quite explain why JavaScript isn't executed properly in the onBeforeUnload function, but from what I've seen sites only use the window.alert or window.prompt dialogs to ask the user if they want to leave the site, and then often executing JavaScript if the user decides to stay.

Hence I'm guessing that some browsers may not allow DOM manipulation when this event is fired - since if the page is unloaded any DOM manipulation done is completely pointless.

So either:

1. Return false in your onBeforeUnload method, and then show your preloader (although this will stop navigation to the next page)
2. Use the onLoad event of the next page to show the preloader image instead

Also note: Opera versions 9.5 and below do not support this event (I'm unsure about later versions) but GMail does manage to catch the back button in Opera.

Possibly related is this security warning for IE7's implementation of the onBeforeUnload event - it's possible Microsoft patched it in a way that prevents the things you're trying to do. And I know IE6 and below don't allow commands like document.location='' in the onBeforeUnload handler for security reasons.