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

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

javascript jquery iframe

如何显示由Javascript生成的一些HTML,javascript,jquery,iframe,Javascript,Jquery,Iframe,这是最初的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>

这是最初的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后，它应该以相同的方式在iframe页面顶部显示该HTML，就像该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');
}

函数showHTML（html）{
变量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');
}

函数showHTML（html）{
变量iframe=$（''）；
iframe[0]。innerHTML=html；
iframe.appendTo（‘body’）；
}

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

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

函数showHTML（html）{
$（''）.appendTo（'正文'）
.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();
}

函数showHTML（html）{
变量iframe=$（''）.appendTo（'body'）；
var doc=iframe[0].contentWindow.document；
doc.open（）；
doc.write（html）；
doc.close（）；
}

试试这个：

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

函数showHTML（html）{
var fSrc=“data:text/html；charset=utf-8，”+encodeURI（html）；
var-iframe=''；
$（“正文”）。附加（iframe）；
}

我从这里找到了一个可能的解决方案

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

函数showHTML（html）{
变量iframe=$（''）.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的一切都很好上面的代码在很多方面都是错误的。您没有对iframe变量执行任何操作$（'iframe'）搜索DOM，而不是内存元素$（'iframe'）.append（html）不适用于iframe

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