3

我需要将一个 html 字符串写入一个元素，然后从该元素读取生成的外部 html。我需要它在 IE10、最新的 FF、Chrome、Safari、Android、iOS Safari 中工作，但在任何较旧的浏览器中都不需要。在所有非 ie 浏览器中，以下简单方法都有效：

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

但是在 IE10 中，上述方法以一种不可接受的方式失败。不知何故，html元素有一个与父文档匹配的body标签，（不是我给它的html字符串！！！我认为这是浏览器本身的一个疯狂错误）。您可以在此处查看此错误：https ://mod.it/iuu_1DcT ，如果您在 IE10 以外的浏览器中查看该应用程序，则输出正文 onload 函数将匹配输入正文 onload 函数。在 IE10 中，无论输入是什么，它都会将输出 onload 函数设置为 foo()，因为 foo 是父级的 onload 函数。

在 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>到控制台。我没有在 IE 10 中测试过它，因为我无权访问它。但它应该工作。

归功于为 externalhtml实现获取选定元素的外部 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 回答