Set iframe innerHTML without loading page in it (w

Question

I want to set the contents of an iframe dynamically, when no pages were loaded before in the iframe.

I'm doing that :

iframe = $('<iframe id="thepage"></iframe>');

iframeHtml = 'iframeHtml';
$('body').append(iframe);

iframe
.contents()
.html(iframeHtml);

But it is not working, the html is still empty.

Answer 1

If you want to avoid using document.write, which is generally not recommended any longer, you can get at the frame contents to add the content:

iframe = $('<iframe id="thepage"></iframe>')
iframeHtml = 'iframeHtml'
$('body').append(iframe)
iframe.contents().find('body').html(iframeHtml)

Answer 2

iframe = $('<iframe id="thepage"></iframe>');

iframeHtml = 'iframeHtml'; $('body').append(iframe);

iframe .contents() .html(iframeHtml);

the reason it does not work is because contents() returns a document object and html() only works on HTMLElemnt objects, html() is basically a wrapper around innerHTML property and document does not have such property.

Answer 3

the best way to populate frame contents is document.write

var dstFrame = document.getElementById('yourFrameId');
var dstDoc = dstFrame.contentDocument || dstFrame.contentWindow.document;
dstDoc.write(yourHTML);
dstDoc.close()

UPD: that is

var iFrame = $('<iframe id="thepage"></iframe>');
$('body').append(iFrame);

var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
iFrameDoc.write('<p>Some useful html</p>');
iFrameDoc.close();

Answer 4

Using JQuery, you can edit the iframe's attribute srcdoc by passing it the html as string:

$('#iframe_id').attr("srcdoc", htmlString);