set innerHTML of an iframe

In javascript, how can I set the innerHTML of an iframe? I mean: how to set, not get.

window["ifrm_name"].document.innerHTML= "<h1>Hi</h1>" does not work, and the same for other solutions.

Iframe and parent document are on the same domain.

I would need to set html of the whole document iframe, not its body.

I would need to avoid jquery solution.


A really simple example ...

<iframe id="fred" width="200" height="200"></iframe>

then the following Javascript is run, either inline, part of an event, etc ...

var s = document.getElementById('fred');
s.contentDocument.write("fred rules");

the "contentDocument" is the equivalent of the "document" you get in the main window, so you can make calls against this to set the body, head, any elements inside ... etc.

I've only tested this in IE8, Chrome and Firefox ... so you may want to test in IE6/7 if you have copies available.

In Firefox and Chrome (don't know about Opera), you can use the data: URI scheme.

 <iframe src=".... data: URI data here ......">

JSFiddle example

Here is a tool to generate data:URI encoded data.

This does not work in IE:

For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

If however as you say in the comment, getting/setting the document's body is enough, you are much easier off using one of the linked examples.

In improving my file uploads in an AJAXS env I had the same need. This worked for me in ie8 and ff 22.0. Both the body innerhtml and div innerhtml work.

function copyframedata(data) {
  var x = document.getElementById("photo_mgr_frame");
  var y = x.contentWindow || x.contentDocument;
  if (y.document) y = y.document;
  y.getElementById('photo_mgr_mb').innerHTML = data;

got it from w3

There is also the srcdoc attribute:

<iframe srcdoc="<p><h1>Hello</h1> world</p>"></iframe>

Demo, Polyfill.

Need Your Help

client side validation with dynamically added field

jquery unobtrusive-validation

I am using jQuery's unobtrusive validation plugin in with ASP.NET MVC. Any fields that are rendered on the server are properly validated.

Can you have multiline HTML5 placeholder text in a <textarea>?

html html5 textarea html-form placeholder

I have ghost text in textfields that disappear when you focus on them using HTML5's placeholder attribute: