Question

这是最初的HTML，它相当小。它只是意味着加载屏幕。

<html>
  <head>
    <title>Simple Hello World</title>
    <link href="rapid-ui.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="rapid-ui.js"></script>
  </head>
  <body>
   This is the body of the page.
  </body>
</html>

“rapid-ui.js”将生成一个HTML字符串，这将是一个完整的文档 - 包括DOCTYPE，head，meta，scripts，css等。生成HTML后，它应该显示该HTML在iframe的页面顶部，就像iframe的“src”设置为生成相同HTML字符串的URL一样。

我试过了：

function showHTML(html) {
  var iframe = $('<iframe id="display" frameborder="0"></iframe>');
  iframe[0].src = 'data:text/html;charset=utf-8,' + encodeURI(html);
  iframe.appendTo('body');
}

似乎没有CSS或脚本正确执行。

这不起作用

function showHTML(html) {
  var iframe = $('<iframe id="display" frameborder="0"></iframe>');
  iframe[0].innerHTML = html;
  iframe.appendTo('body');
}

Answer 1

在将数据附加到dom之前，您不能只将数据插入iframe。试试这个

function showHTML(html) {    
    $('<iframe id="display" frameborder="0">').appendTo('body')
                              .contents().find('body').append(html);
}

如果你需要编辑头部，这是另一种方法。

function showHTML(html) {    
    var iframe = $('<iframe id="display" frameborder="0">').appendTo('body');
    var doc = iframe[0].contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}

Answer 2

试试这个：

function showHTML(html) {
    var iframe = '<iframe id="display" frameborder="0"></iframe>';
    $("body").append(iframe).append(html);
}

append将附加在元素

中

如果您需要编辑iframe的src而不是......请执行此操作：

function showHTML(html) {
    var iframe = '<iframe id="display" frameborder="0"></iframe>';
    $("body").append(iframe).attr("src", "data:text/html;charset=utf-8," + encodeURI(html));
}

或者这个：

function showHTML(html) {
    var fSrc = "data:text/html;charset=utf-8," + encodeURI(html);
    var iframe = '<iframe id="display" src="\" + fSrc + "\" frameborder="0"></iframe>';
    $("body").append(iframe);
}

Answer 3

我从这里找到：Creating an iframe with given HTML dynamically一个可能的解决方案

function showHTML(html) {
    var iframe = $('<iframe id="display" frameborder="0"></iframe>').appendTo('body');
    var doc = iframe[0].contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}

此解决方案似乎有效。

如何显示由Javascript生成的一些HTML

3 个答案: