How to set HTML content into an iframe

Question

I have a HTML string

<html>
  <body>Hello world</body>
</html>

and I want to set it to an iframe with JavaScript. I am trying to set the HTML like this:

contentWindow.document.body.innerHTML

or

contentDocument.body.innerHTML

or

document.body.innerHTML

but IE gives "Access is denied." or "Object does not support this property or method." or "Invalid final element to the action." errors.

Here is my full code:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="jquery_1.7.0.min.js"/>
    <script type="text/javascript">
      $(document).ready(function(){
        var htmlString = "<html><body>Hello world</body></html>";
        var myIFrame = document.getElementById('iframe1');
        // open needed line commentary
        //myIFrame.contentWindow.document.body.innerHTML = htmlString;
        //myIFrame.contentDocument.body.innerHTML = htmlString;
        //myIFrame.document.body.innerHTML = htmlString;
        //myIFrame.contentWindow.document.documentElement.innerHTML = htmlString;
      });
    </script>
  </head>
  <body>
    <p>This is iframe:
      <br>
      <iframe id="iframe1">
      <p>Your browser does not support iframes.</p>
      </iframe>
  </body>
</html>

Why you not load a page it works very well? why you want to use a string to load? let me know — The Mechanic, May 15 '13 at 05:13

score 67 · Accepted Answer · edited Oct 03 '14 at 08:08

67

You could use:

document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");

Here's a jsFiddle, which works in all major browsers.

Note that instead of contentDocument.write you should use contentWindow.document.write: this makes it work in IE7 as well.

edited Oct 03 '14 at 08:08

Jeroen

60,696
40
206
339

answered May 15 '13 at 05:51

Mathijs Flietstra

12,900
3
38
67

1

note, if you are reading and writing in and out iframe, you will need to write document.getElementById('iframe1').contentWindow.document.write(""); to have empty string reading like this var iframe_html = document.getElementById('iframe_exe_uploader').contentWindow.document.body.innerHTML; – Yevgeniy Afanasyev Jan 06 '15 at 00:31
4

I needed to use open/close to get it working in chrome: iframe.contentWindow.document.open('text/htmlreplace'); iframe.contentWindow.document.write(content); iframe.contentWindow.document.close(); – Henry Mar 04 '15 at 00:38
2

If you don't want to append, you can do it with `document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);` [(source)](https://stackoverflow.com/a/8322025/1717828). – user1717828 Feb 17 '20 at 17:33

Christophe · Answer 2 · 2013-05-16T05:09:12.967

28

var htmlString="<body>Hello world</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+htmlString+"'";

With html5 you'll be able to use the srcdoc attribute.

edited May 16 '13 at 05:09

answered May 15 '13 at 17:39

Christophe

27,383
28
97
140

score 9 · Answer 3 · edited Jun 02 '17 at 11:55

The innerHTML is a bit tricky especially in IE, where elements like thead are read-only and cause a lot of trouble.

Based on the documentation on msdn you might try documentMode which provides a innerHTML property.

myIFrame = myIFrame.contentWindow ||
    myIFrame.contentDocument.document ||
    myIFrame.contentDocument;
myIFrame.document.open();
myIFrame.document.write('Your HTML Code');
myIFrame.document.close();

this might only work in IE.

score 4 · Answer 4 · answered Jan 22 '23 at 23:14

4

In 2023, the correct answer to this problem is to use the srcdoc attribute of the <iframe> element. I can be done straight in your HTML file or with javascript:

document.getElementById('iframe').srcdoc = "<html><body>Hello world!</body></html>";

answered Jan 22 '23 at 23:14

Fla

536
6
23

user568109 · Answer 5 · 2013-05-12T06:56:26.357

0

How about document.documentElement.innerHTML. But do know that everything in the page will be replaced even the script that does that.

For an iframe it would be like this myIFrame.contentWindow.document.documentElement.innerHTML

edited May 12 '13 at 06:56

answered May 12 '13 at 06:49

user568109

47,225
17
99
123

1

Thanks for your answer, but if I use this code ie say this error: "Invalid final element to the action." – SBotirov May 12 '13 at 16:04

score 0 · Answer 6 · answered Sep 12 '19 at 15:27

I have a problem with 'origin' with the answers here. This is how it's work for me:

const frame1 = document.createElement('iframe');
frame1.name = 'frame1';
//not have to set this style,just for demo
frame1.style.position = 'absolute';
frame1.style.height = '800px';
frame1.style.top = '100px';
frame1.style.left = '100px';
frame1.style.background = 'white';

document.body.appendChild(frame1);
const frameDoc =
  frame1.contentWindow || frame1.contentDocument.document || 
  frame1.contentDocument;

frameDoc.document.write('<html><head><title></title><body>Hello world</body></html>');
frameDoc.document.close();

Binhvi · Answer 7 · 2013-05-15T06:07:48.003

-4

try it:

$('iframe').load(function() {
    $(this).contents().find('body').append("Hello world");
});

update:

$(function(){
    $('iframe').load(function() {
        $(this).contents().find('body').append("Hello world");
    }); 
})

edited May 15 '13 at 06:07

answered May 15 '13 at 05:52

Binhvi

106
5

An answer using vanilla JS was expected, this example uses jQuery. – jtrezza May 24 '22 at 13:53

How to set HTML content into an iframe

7 Answers7

Linked