Bug Tracker

Opened 11 years ago

Closed 11 years ago

#6977 closed bug (worksforme)

Cross-browser issues with inserting an iframe into the DOM and updating it's contents

Reported by: recremd Owned by:
Priority: Milestone: 1.4.3
Component: unfiled Version: 1.4.2
Keywords: Cc:
Blocked by: Blocking:


I was forced to use some native javascript because of some oddities that I noticed with jQuery's handling of iframes.

I would expect the following lines of code to create an iframe, and then insert content's into the body of the iframe:

$('#someElementId').after('<iframe id="iframeElId"></iframe>'); $('#iframeElId').contents().find('body').html('<p>some html</p>');

In chrome, this works perfectly. In firefox, this does not work. The iframe is created, but the contents are not updated. I only tested this part in chrome and firefox.

Oddly enough, if I do the following:

$('#someElementId').after('<iframe id="iframeElId"></iframe>'); alert('hi!'); $('#iframeElId').contents().find('body').html('<p>some html</p>');

This does produce the desired result, so clearly there is some kind of race situation occurring in firefox that does not happen in chrome. I'm guessing that chrome waits for the element to be inserted into the DOM before moving on, while firefox does not. I'm not aware of any kind of success function for .after().

To resolve this issue, I had to revert to native javascript:

$('#someElementId').after('<iframe id="iframeElId"></iframe>'); doc = document.getElementById('iframeElId').contentDocument; if(typeof(doc) == 'undefined') {

doc = document.getElementById('iframeElId').contentWindow.document;

} doc.write('<p>some html</p>');

I'm satisfied with my workaround. However, I was held up by this problem for a bit longer than I expected. Perhaps there's a better solution, but this seems like a bug to me.

Change History (1)

comment:1 Changed 11 years ago by dmethvin

Resolution: worksforme
Status: newclosed

I agree it's probably a race between the processing of the iframe contents and the existence of the iframe's body. If the body isn't there, jQuery can't select it. You could work around this with a setTimeout to wait a short time for the iframe to load, which is basically what the alert was doing.

Note: See TracTickets for help on using tickets.