如何将HTML内容设置到iframe中

Question

如何将HTML内容设置到iframe中

javascripthtmliframeinternet-explorer-8internet-explorer-9

48

我有一个HTML字符串

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

我想用JavaScript将其设置为iframe。我正在尝试像这样设置HTML：

contentWindow.document.body.innerHTML

或者

contentDocument.body.innerHTML

或者

document.body.innerHTML

但是 IE 给出 "Access is denied." 或 "Object does not support this property or method." 或者 "Invalid final element to the action." 错误。

这是我完整的代码：

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

- SBotirov

1

为什么你不加载页面，它很好用呀？为什么要使用字符串来加载？告诉我吧。 - The Mechanic

7个回答

27

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

有了html5，您将能够使用srcdoc属性。

- Christophe

9

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中有效。

- MatthiasLaug

4

在2023年，解决此问题的正确方法是使用<iframe>元素的srcdoc属性。这可以直接在您的HTML文件中完成，也可以使用javascript完成：

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

- Fla

0

如何使用document.documentElement.innerHTML呢？但要知道，页面中的所有内容都将被替换，包括执行此操作的脚本。

对于一个iframe，可以这样使用：myIFrame.contentWindow.document.documentElement.innerHTML

- user568109

1

谢谢您的回答，但是如果我使用这段代码，会出现以下错误：“操作的最终元素无效。” - SBotirov

0

我在这里看到的答案中，对于“origin”我有些疑惑。对我来说，它的工作方式如下：

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

- OriEng

-4

试一下：

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

更新：

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

- Binhvi

期望使用原生JS来回答问题，但是这个例子使用了jQuery。 - jtrezza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mathijs Flietstra · Accepted Answer

你可以使用：

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

这里有一个jsFiddle，它可以在所有主要浏览器中运行。

请注意，您应该使用contentWindow.document.write而不是contentDocument.write：这使其在IE7中也能正常工作。