Question

我使用jQuery通过Ajax请求完整的HTML5文档。我希望能够解析它们并将元素传输到我的主页面DOM，理想情况下是所有主流浏览器，包括移动设备。我不想创建iframe，因为我希望流程尽可能快。使用Chrome＆amp; Firefox我可以执行以下操作：

var contents = $(document.createElement('html'));
contents[0].innerHTML = data; // data : HTML document string

这会创建一个合适的文档，有点令人惊讶，只是没有doctype。但是，在IE9中，可能不会使用innerHTML来设置html元素的内容。我试着做了以下，没有任何运气：

创建一个DOM，打开它，写入并关闭它。问题：在doc.open上，IE9抛出一个名为Unspecified error.的异常。
```
var doc = document.implementation.createHTMLDocument('');
doc.open();
doc.write(data);
doc.close();
```
创建ActiveX DOM。这次，结果更好但是在文件IE9之间传输/复制元素时崩溃。不好，因为没有IE8支持（adoptNode / importNode支持）。
```
var doc = new ActiveXObject('htmlfile'); 
doc.open();
doc.write(data);
doc.close();
contents = $(doc.documentElement);
document.adoptNode(contents);
```

我正在考虑递归地重新创建元素，而不是在我的文档之间传递它们，但这似乎是一项昂贵的任务，因为我可以有很多节点要传输。我喜欢我的上一个ActiveX示例，因为它最有可能在IE8及更早版本中工作（至少用于解析）。

有关于此的任何想法吗？同样，我不仅需要能够解析head和body，而且我还需要能够将这些新元素附加到我的主dom。

非常感谢！

Answer 1

回答我自己的问题...为了解决我的问题，我使用了帖子中提到的所有解决方案，如果浏览器抛出错误，请使用try / catch块（哦，我们如何爱你IE！）。以下适用于IE8，IE9，Chrome 23，Firefox 17，iOS 4和5，Android 3＆amp; 4.我没有测试Android 2.1-2.3和IE7。

var contents = $('');
try {
  contents = $(document.createElement('html'));
  contents[0].innerHTML = data;
}
catch(e) {
  try {
    var doc = document.implementation.createHTMLDocument('');
    doc.open();
    doc.write(data);
    doc.close();
    contents = $(doc.documentElement);
  }
  catch(e) {
    var doc = new ActiveXObject('htmlfile'); 
    doc.open();
    doc.write(data);
    doc.close();
    contents = $(doc.documentElement);
  }
}

此时我们可以使用jQuery找到元素。将它们转移到不同的DOM会产生一些问题。有几种方法可以做到这一点，但它们尚未被广泛支持（importNode＆amp; adoptNode）和/或有缺陷。鉴于我们的选择器字符串被称为“选择器”，下面我重新创建了找到的元素并将它们附加到'.someDiv'。

var fnd = contents.find(selector);
if(fnd.length) {
  var newSelection = $('');
  fnd.each(function() {
    var n       = document.createElement(this.tagName);
    var attr    = $(this).prop('attributes');
    n.innerHTML = this.innerHTML;
    $.each(attr,function() { $(n).attr(this.name, this.value); });
    newSelection.push(n);
  });
  $('.someDiv').append(newSelection);
};

多个HTML DOM - 解析和传输数据

1 个答案: