FireFox Never Stops Loading With iFrame Submission
Posted August 27, 2008 at 9:40 AM by Ben Nadel
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.
@Rick,
Better to be paranoid than have to exhaustively test on every browser and version ever made :) I like your style.
"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. ;)
@Craig,
Ha ha :) Good catch.
Thank you a lot! Simple and clean! :D
Thanks a bunch! This also saved my day!
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.
That's incredible! You just fixed my lib :-D
PS: Working ok with a 50ms delay
@Bert,
Awesome!
This works great! It also works with a 0ms delay for me.
By the way, just found this while investigating other problems:
https://developer.mozilla.org/en/DOM/window.setTimeout#Minimum_delay_and_timeout_nesting
This explains why it is safe to use a small delay:
"In addition to 'clamping', the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks."
@Ulrich,
Hmm, I wonder how they came up with the term, "clamping"? In any case, thanks for posting that - I had no idea.
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.
