Oliver Nassar

Firefox is calling the load event to soon on an iframe

March 03, 2013

In preperation for an update to imnosy.com, I'm dynamically generating an iframe element, inserting it into the DOM, and attaching a load event to it. This works all well and good in Chrome, but I ran into a bug in Firefox.

The bug is that Firefox is calling the load event immediately rather than waiting for the content of the iframe to load. Here is some sample code:

var iFrameElement = $('<iframe />');
$('body').append(iFrameElement);
setTimeout(function() {
    iFrameElement.attr('src', 'http://facebook.com/');
}, 500);

Can you spot the bug? The 500 millisecond delay is what's causing the issue. It seems that Firefox will initiate the load event as soon as the iframe is added to the DOM, whereas Chrome will wait until the content itself (via the attr method call) is specified.

I can understand both cases, but I believe Chrome's makes more sense. Firefox is prematurely making the call to the event, assuming that the src attribute was specified.

I got around this as follows:

var iFrameElement = $('<iframe />');
setTimeout(function() {
    $('body').append(iFrameElement);
    iFrameElement.attr('src', 'http://facebook.com/');
}, 500);

Hope this helps someone else.
Oliver