How to set HTML content into an iframe

问题

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

contentDocument.body.innerHTML

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>

回答1:

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.

回答2:

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.

回答3:

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.

http://msdn.microsoft.com/en-us/library/ie/ms535862(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85).aspx

回答4:

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

回答5:

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

回答6:

try it:

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

update:

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

来源：https://stackoverflow.com/questions/16504816/how-to-set-html-content-into-an-iframe

标签

javascript

html

iframe

internet-explorer-8

internet-explorer-9