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、scripts、css などを含む完全なドキュメントになります。HTML の生成が完了したら、その HTML を上に表示する必要があります。その iframe の「src」が同じ HTML 文字列を生成する URL に設定されている場合と同じ方法で、iframe 内のページ。

私はこれを試しました：

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

私はここから見つけました:与えられた 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();
}

この解決策はうまくいくようです。

于 2013-05-19T04:55:07.333 に答える