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

【问题标题】：How to show some HTML that was generated by Javascript如何显示一些由 Javascript 生成的 HTML
【发布时间】：2013-05-19 04:31:08
【问题描述】：

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

【问题讨论】：

标签： javascript jquery iframe

【解决方案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();
}

【讨论】：

这非常接近 - CSS 和 HTML 被正确插入 - 但 DOCTYPE 和 meta 不被尊重。也不评估脚本。
编辑它以使其尊重文档的所有部分
哦，没关系 - 让我进行更多调查 - 我认为 IE 7/8 中的问题可能发生在我的 HTML 生成代码中，以某种方式导致不同的 HTML。
是的 - 我现在已经验证了 - 我的代码中的问题在于 HTML 生成 - 我已经解决了这个问题，现在 IE 7/8 一切都很好

【解决方案2】：

我从这里找到：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();
}

这个解决方案似乎有效。

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

上面的代码在很多方面都是错误的。您对 iframe 变量什么也不做。 $('iframe') 搜索 DOM，而不是内存元素。 $('iframe').append(html) 不适用于 iframe