Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at TechCrunch Disrupt (New York, NY) with:

FireFox Never Stops Loading With iFrame Submission

By Ben Nadel on

A while back, I created an AJAX file upload demo using jQuery and ColdFusion. The demo worked quite nicely, but people using FireFox 3 were telling me that FireFox never stopped loading. That is, the page would execute fine, but the window would signal (via the Status Bar and loading circle) that it never completed loading the page. Based on some feedback from Josh, I narrowed the problem down to the removal of the iFrame from the page during its own load callback:

  • jFrame.load(
  • function( objEvent ){
  • ..... CODE TO PROCESS .....
  •  
  • // Remove iFrame from page.
  • jFrame.remove();
  • }
  • );

Something about removing the iFrame as part of the its own load() event binding was causing issues. To get around this, all I had to do was add a slight delay to the actual removal of the iFrame:

  • jFrame.load(
  • function( objEvent ){
  • ..... CODE TO PROCESS .....
  •  
  • // Remove the iFrame from the document.
  • // Because FireFox has some issues with
  • // "Infinite thinking", let's put a small
  • // delay on the frame removal.
  • setTimeout(
  • function(){
  • jFrame.remove();
  • },
  • 100
  • );
  • }
  • );

By delaying the iFrame removal for a tenth of a second (could have been smaller), it seems to allow the load() event to execute properly without causing any hanging on the page. FireFox acknowledges that the iFrame has in fact stopped loading once the load() event has finished executing. Then, once it's done executing, we can then safely remove the iFrame from the page.

I am sure that there are a number of scenarios that would cause FireFox to never stop loading, but this is a solution to one of them.




Reader Comments

I've gotten to the point in my code where absolutely any removal of a DOM object is done asynchronously. Too many browsers do strange things where you remove an object and it is in any way tied via an event to the code you are currently running.

Yeah, it's paranoia. Yeah, it's cargo cult. But as the example above shows, it's a line or two of code that prevents hours of debugging headaches.

"Based on some feedback from Josh, I narrowed the problem down to the removal of the iFrame from the page during its own load callback"

Doctor, I think this man has Apple Fever. ;)

Worked like a charm! Thanks! I was wondering what was going on with the constantly loading Firefox tab.

Great transaction, great seller, would recommend (A+++).

I think it's difficult for FF to remove iframe because removal is started from the same thread, from method fired from iframe itself. Maybe it's wrong. Setting timeout creates another thread. And, as a result, removal becomes available.

Thanks a bunch! I was struggling with this and it happened to be for precisely the same reason--and AJAX file upload script. I added a delay to my cleanup() and now all is good.