如何将 HTML 内容设置为 iframe

IT技术 javascript html iframe internet-explorer-8 internet-explorer-9
2021-03-07 14:45:35

我有一个 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>
6个回答

你可以使用：

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

这是一个jsFiddle，它适用于所有主要浏览器。

请注意，contentDocument.write您不应该使用contentWindow.document.write: 这使得它也可以在 IE7 中使用。

请注意，如果您在 iframe 中读写，则需要编写 document.getElementById('iframe1').contentWindow.document.write("<html><body></body></html>") ; 像这样读取空字符串 var iframe_html = document.getElementById('iframe_exe_uploader').contentWindow.document.body.innerHTML;
2021-04-25 14:45:35
如果你不想追加，你可以用document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string); (source) 来完成。
2021-04-26 14:45:35
我需要使用打开/关闭来让它在 chrome 中工作： iframe.contentWindow.document.open('text/htmlreplace'); iframe.contentWindow.document.write(content); iframe.contentWindow.document.close();
2021-05-12 14:45:35 
var htmlString="<body>Hello world</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+htmlString+"'";

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

这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。

我对这里的答案的“起源”有疑问。这就是它对我的工作方式：

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

怎么样document.documentElement.innerHTML。但是要知道页面中的所有内容都将被替换，即使是执行此操作的脚本。

对于 iframe，它会是这样的 myIFrame.contentWindow.document.documentElement.innerHTML

感谢您的回答，但如果我使用此代码，即说此错误：“操作的最终元素无效。”
2021-05-16 14:45:35
其它你可能感兴趣的问题
上一篇如何使用 JavaScript 更改 HTML 元素的 ID？ 下一篇([![]]+[][[]])[+!+[]+[+[]]] 为什么以及如何计算为字母“i”？