0

这是最初的 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、脚本、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');
}
4

3 回答 3

2

您不能在将数据附加到 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();
}
于 2013-05-19T04:42:25.803 回答
0

尝试这个：

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);
}
于 2013-05-19T04:47:13.507 回答
0

我从这里找到：Creating an iframe with given HTML dynamic a possible solution

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

这个解决方案似乎有效。

于 2013-05-19T04:55:07.333 回答