3

html 文字列を要素に書き込み、その要素から結果の外側の html を読み取る必要があります。これは、IE10、最新の FF、Chrome、Safari、Android、iOS Safari で動作する必要がありますが、古いブラウザーでは動作しません。IE 以外のすべてのブラウザで、次の簡単な方法が機能します。

var html = WIUI.createElement('html');
html.innerHTML =  htmlString;
console.log(html.outerHTML);

ただし、IE10 では、上記のアプローチは 1 つの容認できない方法で失敗します。どういうわけか、html 要素には、親ドキュメントの body タグと一致する body タグがあります(私が指定した html 文字列ではありません!!! これはブラウザー自体のクレイジーなバグだと思います)。このバグの動作はhttps://mod.it/iuu_1DcTで確認できます。IE10 以外のブラウザーでそのアプリケーションを表示すると、出力本文のオンロード関数は入力本文のオンロード関数と一致します。IE10 では、foo は親の onload 関数であるため、入力が何であれ、出力の onload 関数を foo() に設定します。

IE10 (および最新のすべてのブラウザー) で機能する代替アプローチは、次のように iframe を作成することです。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open();
doc.write(htmlString);
doc.close();
console.log(doc.documentElement.outerHTML);

ただし、これには、iframe への書き込みによって実際に html が実行されるという不幸な副作用がありますが、これは望ましくありません。

私の研究から、そのようなものはうまくいくはずです（そして、IEではないブラウザでうまくいきます）

var doc = document.implementation.createHTMLDocument('temp');
doc.open();
doc.write(htmlString);
doc.close();
console.log(doc.documentElement.outerHTML);

ただし、IE10 では、doc.open 行で「不明なエラー」が発生します。何が起こっているのか、またはこのタイプのタスクで他のブラウザーと比較して IE を使用するのが非常に難しい理由を誰かに教えてもらえますか?

4

2 に答える 2

0

この仲間を試してみてください：

<html>
  <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
    <body>
    <textarea id="textArea" rows="4" cols="50">
       Empty area
    </textarea>
    <script type="text/javascript">
    jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
    };

    function doSomething(text) {
       var $wrapper = $('#textArea');
       $wrapper.html('<html><head></head><body><div id="inner">' + text +'</div></body></html>');
       console.log($wrapper.outerHTML());
    }
    doSomething('test');
</script>
</body>
</html>

<textarea id="textArea" rows="4" cols="50">&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="inner"&gt;test&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</textarea>これにより、コンソールに次のように出力されます。アクセスできないため、IE10でこれをテストしていません。しかし、それは機能するはずです。

選択した要素のouterhtml実装用の外部HTMLを取得するためのクレジット。

編集：

于 2013-02-22T15:02:44.387 に答える
0

次のことを行うだけで、IE10 でこの問題を回避できます。

var doc = document.implementation.createHTMLDocument('title');
html = doc.createElement('html');
html.innerHTML =  htmlString;
console.log(html.outerHTML);

何らかの理由で、既存のドキュメントを使用するのではなく、新しいドキュメントを作成すると、IE10 で本文の onload 属性が破損しなくなります。

于 2013-02-26T17:32:21.427 に答える