CODEWITHSUNDEEP
javascriptjqueryiframe
Leto
Leto

Reputation: 2674

Set iframe innerHTML without loading page in it (with jquery)

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.

Upvotes: 12

Views: 31046

Answers (5)

Ranjan Singh
Ranjan Singh

Reputation: 1

Use the jQuery contents() method.

You can use the jQuery contents() method in combination with the find(), val() and html() methods to insert text or HTML inside an iframe body.

var EditFrame = $("#EditWindow").contents().find('body');  
var message = "Your message which needs to show in Iframe";
EditFrame.html(message);

Upvotes: 0

Gad Wissberg
Gad Wissberg

Reputation: 475

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

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

Upvotes: 9

Alfgaar
Alfgaar

Reputation: 172

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.

Upvotes: 3

Jonathan Schneider
Jonathan Schneider

Reputation: 27747

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)

Upvotes: 12

newtover
newtover

Reputation: 32094

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();

Upvotes: 26

Related Questions