javascript 如何将HTML内容设置为iframe

oprakyz7 于 2023-01-24 发布在 Java

关注(0)|答案(7)|浏览(200)

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

JavaScript

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

7条答案

按热度按时间

mm5n2pyu1#

您可以使用：

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

这是一个jsFiddle，它可以在所有主流浏览器上运行。
请注意，您应该使用contentWindow.document.write而不是contentDocument.write：这使得它在IE7中也能工作。

赞(0）回复(0）举报 2023-01-24

oxf4rvwz2#

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

有了html5，你就可以使用srcdoc attribute了。

赞(0）回复(0）举报 2023-01-24

guykilcj3#

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。

赞(0）回复(0）举报 2023-01-24

bz4sfanl4#

document.documentElement.innerHTML怎么样？但是要知道页面中的所有内容都会被替换，即使是这样做的脚本。
对于iframe，它将类似于myIFrame.contentWindow.document.documentElement.innerHTML

赞(0）回复(0）举报 2023-01-24

krcsximq5#

我对“起源”这个词的答案有疑问。这就是它对我的作用：

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

赞(0）回复(0）举报 2023-01-24

d4so4syb6#

在2023年，这个问题的正确答案是使用<iframe>元素的srcdoc属性，我可以直接在HTML文件中完成，也可以使用javascript：

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

赞(0）回复(0）举报 2023-01-24

ax6ht2ek7#

试试看：

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

更新：

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

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何将HTML内容设置为iframe

7条答案

相关问题

热门标签

最新问答