Thursday, April 17th, 2008

Are you sure your unload handler is firing in IE?

Category: Browsers, IE, Tip

Johan Sörlin found that sometimes his unload event never fired in IE:

We recently found a serious bug in IE where the unload event wouldn’t fire on a specific page we had on a site. After some bug tracking we found out that the unload event never fired since all the contents of the page hadn’t finished loading before we navigated to another page.

This is a major problem since the unload event is commonly used to clear circular references etc in IE to prevent memory leaks. So this bug makes all Ajax libraries/frameworks out there that depend on the unload event on IE to fail if the page is unloaded before the contents of the page finished loading.

Here is an example of the bug, run the page in IE and follow the instructions on the page.

He then produced a work around:

javascript

  1. function fixUnload() {
  2.     // Is there things still loading, then fake the unload event
  3.     if (document.readyState == 'interactive') {
  4.         function stop() {
  5.             // Prevent memory leak
  6.             document.detachEvent('onstop', stop);
  7.  
  8.             // Call unload handler
  9.             unload();
  10.         };
  11.  
  12.         // Fire unload when the currently loading page is stopped
  13.         document.attachEvent('onstop', stop);
  14.  
  15.         // Remove onstop listener after a while to prevent the unload function
  16.         // to execute if the user presses cancel in an onbeforeunload
  17.         // confirm dialog and then presses the stop button in the browser
  18.         window.setTimeout(function() {
  19.             document.detachEvent('onstop', stop);
  20.         }, 0);
  21.     }
  22. };
  23.  
  24. function unload() {
  25.     alert('Unload event occured.');
  26. };
  27.  
  28. window.attachEvent('onunload', unload);
  29. window.attachEvent('onbeforeunload', fixUnload);

In other IE news, remember not to have a CSS class that uses the (valid) _ character as IE 6 won’t be happy.

Posted by Dion Almaer at 10:52 am
9 Comments

++++-
4.1 rating from 22 votes

9 Comments »

Comments feed TrackBack URI

Am I mistaken, or does jQuery already code around this bug?

Comment by slaniel — April 17, 2008

Just tested this in IE7 WinXP and the unload event fired normally after I broke off the page loading before the image appeared.

So this seems to be one of those agonising “sometimes” bugs. I still have to test the load and unload events in my ongoing events research, so I’ll test explicitly for this bug.

Comment by ppk — April 17, 2008

jQuery only listens for the unload event on that line. And since that event never fires if the document never finished it’s loading it can’t cleanup the references. This is a common pattern in libraries.

Comment by Spocke — April 17, 2008

Oops, sorry, commented without reading the bug instructions well enough. In my current IE7 the bug occurs as described in the quote.

Comment by ppk — April 17, 2008

Anyone have more details on this IE6 underscore business? I use underscores in css classes all the time and don’t seem to have a problem.

Comment by Smokinn — April 17, 2008

Aye, I get this problem as well — not only that, but in some weird cases with iFrames, not only will the unload handler not fire, but sometimes code set with SetInterval keeps firing after the iFrame’s been removed…

Comment by mdmadph — April 17, 2008

Actually, the CSS part would be the _ as the first character of a class name and no, you can’t use – either. But you will be able to use _ when IE6 dies.

And the unload bug… yep, it’s a tough one!

Comment by vladfr — April 19, 2008

I am currently using Google Maps for a number of projects and unfortunately keep running into issues with the inability to use th unload event. Any suggestions on fixing/patching/repairing such a thing?

Comment by JoeMcCann — April 27, 2008

This is a great fix. I have been testing this behavior in Firefox and it seems to also miss the onunload event if the window has not completely load. I am using a pop up window with a frameset for the content, closed it immediately on launch, and all my onbefore and onunload code was completely ignored. I know Firefox doesn’t support onstop, is there any way to catch this on Firefox?

Comment by lockheartmac — December 10, 2008

Leave a comment

You must be logged in to post a comment.