如何HTML内容设置到iframe(How to set HTML content into an

我有一个HTML字符串

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

我想将其设置为包含JavaScript的iframe中。我想设置HTML这样的：

contentWindow.document.body.innerHTML

要么

contentDocument.body.innerHTML

要么

document.body.innerHTML

但IE给出了“访问被拒绝”。或“对象不支持此属性或方法。” 或“无效的最后一个元素的动作。” 错误。

这里是我完整的代码：

<!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>

Answer 1:

你可以使用：

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

这里有一个的jsfiddle ，这在所有主要的浏览器上运行。

注意，代替contentDocument.write你应该使用contentWindow.document.write ：这使得它在IE7中正常工作。

Answer 2:

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

使用HTML5，你就可以使用srcdoc属性。

Answer 3:

所述innerHTML是尤其是在IE中，其中相同的元件有点棘手thead是只读并引起很多麻烦。

根据MSDN文档上，你可以尝试documentMode它提供innerHTML属性。

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

这可能只在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

Answer 4:

如何document.documentElement.innerHTML 。但是知道，一切都在页面将被替换，甚至是做脚本。

对于一个iframe它会是这样myIFrame.contentWindow.document.documentElement.innerHTML

Answer 5:

试试吧：

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

更新：

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

文章来源: How to set HTML content into an iframe