set innerHTML of an iframe

Question

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.

I think this is possible in some browsers, but not in others. Which ones would you need to support? Why not use a simple `div` instead? — Pekka, Feb 19 '11 at 11:01
@infoSetu neither is what he wants I think, he wants to set the full document — Pekka, Feb 19 '11 at 11:40
@Pekka: if I have to choose, I wish it working in Firefox. I need an iframe because I have to "simulate" a real page with script and css external links in its head. @infoSetu: have you seen the link inside the text of my question? I need to set, not to get; and I need to set a property of the document, not of one of its elements. — tic, Feb 19 '11 at 11:41
@info nope, he needs to set the whole document, not just the body. — Pekka, Feb 19 '11 at 11:45
Admitting that the body could be enough, which solution is perfect? Which one in the page you (and I before you) linked is perfect? And is it perfect to get or also to set? — tic, Feb 19 '11 at 11:48

score 32 · Accepted Answer · answered Feb 19 '11 at 14:01

32

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.

answered Feb 19 '11 at 14:01

Jeff Parker

7,367
1
22
25

.write works, but if I run s.contentDocument.documentElement.innerHTML="
fred rules
"; it does not works. – tic Feb 19 '11 at 16:07
Did you really test this in IE8? – mplungjan Nov 25 '11 at 07:56
7

Be careful, you may need to close the connection with s.contentDocument.close(); See [this post](http://stackoverflow.com/questions/18466983/iframe-doesnt-stop-to-loading/18467257?noredirect=1#18467257) – Jecimi Aug 27 '13 at 13:55

score 7 · Answer 2 · answered Feb 19 '11 at 11:49

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.

data: URI, interesting, I did not know. I'm wondering about DOM isolation, but maybe I will open another question. — tic, Feb 19 '11 at 16:13

score 6 · Answer 3 · answered Oct 05 '16 at 16:23

6

There is also the srcdoc attribute:

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

Demo, Polyfill.

answered Oct 05 '16 at 16:23

nha

17,623
13
87
133

score 1 · Answer 4 · edited Sep 03 '13 at 21:48

1

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

edited Sep 03 '13 at 21:48

Arnaud Rinquin

4,296
1
30
51

answered Sep 03 '13 at 21:22

johnny3

11
1

Not sure why any body would want to do that. – Arnaud Rinquin Sep 03 '13 at 21:43

Arthur A. Kennedy · Answer 5 · 2021-10-07T22:30:40.083

0

I came across the same problem but here's an easy fix.

function Run(){
   var txt = "<h1>Hello World</h1>";
   var frame = document.getElementById('frame');

   var frame = (frame.contentWindow || frame.contentDocument);
   if (frame.document) frame = frame.document;

   frame.open();
   frame.write(txt);
   frame.close();
}

<iframe id='frame'>
</iframe>
<button onclick='Run()'>Run</button>

edited Oct 07 '21 at 22:30

answered Oct 07 '21 at 22:23

Arthur A. Kennedy

31
2

set innerHTML of an iframe

5 Answers5

fred rules

Linked