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.