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>");
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>");
Solution
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>");
OTHER TIPS
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