Empty iFrame load behaviour is different

Question

Can anyone please help me identify why this iframe behaves differently in Chrome vs Firefox?

$('<iframe id="iframe1"></iframe>').appendTo($('.main')).contents().find('html').html("<h1 style='text-align: center;'>This IS an iframe</h1>");

http://jsfiddle.net/ioowilly/L9uAX/

Answer 1

or try this

$('<iframe id="iframe1" src="javascript:undefined;" ></iframe>').appendTo($('.main')).contents().find('body').html("<h1 style='text-align: center;'>This IS an iframe</h1>");

Answer 2

That's because some navigator need some time to load iframe in DOM

Here is the patch :

$('<iframe id="iframe1"></iframe>').appendTo($('.main')).ready(function() {
    setTimeout(function() {
$('#iframe1').contents().find('body').append('<h1 style="text-align: center;">This IS an iframe</h1>');
    }, 50);
});

Based on this answer : appending content into a dymanically created iframe gets an empty iframe