Login/Register
How to set HTML content into an iframe
Asked Answered
Solved javascripthtmliframeinternet-explorer-8internet-explorer-9
S

7

50

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>
Stravinsky answered 12/5, 2013 at 6:33 Comment(1)
Why you not load a page it works very well? why you want to use a string to load? let me know – Badderlocks
B
69

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.

Breviary answered 15/5, 2013 at 5:51 Comment(3)
note, if you are reading and writing in and out iframe, you will need to write document.getElementById('iframe1').contentWindow.document.write("<html><body></body></html>"); to have empty string reading like this var iframe_html = document.getElementById('iframe_exe_uploader').contentWindow.document.body.innerHTML; – Infectious
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(); – Schema
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). – Bamberger
G
27
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.

Granddaughter answered 15/5, 2013 at 17:39 Comment(0)
M
9

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.

Millur answered 15/5, 2013 at 5:26 Comment(0)
R
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>";
Runt answered 22/1, 2023 at 23:14 Comment(0)
L
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

Liberalize answered 12/5, 2013 at 6:49 Comment(1)
Thanks for your answer, but if I use this code ie say this error: "Invalid final element to the action." – Stravinsky
S
0

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();
Sunnisunnite answered 12/9, 2019 at 15:27 Comment(0)
F
-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");
    }); 
})
Freiman answered 15/5, 2013 at 5:52 Comment(1)
An answer using vanilla JS was expected, this example uses jQuery. – Donniedonnish

© 2022 - 2024 — McMap. All rights reserved.