多個HTML DOM的 - 解析和使用jQuery通過Ajax傳輸數據

我請求全HTML5文檔。我希望能夠解析它們並將元素傳輸到我的主頁DOM，理想情況下可以與所有主流瀏覽器（包括移動設備）一起傳輸。我不想創建一個iframe，因爲我希望該過程儘可能快。有了Chrome &火狐我可以做到以下幾點：多個HTML DOM的 - 解析和使用jQuery通過Ajax傳輸數據

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支持（採用節點/ importNode支持）。
```
var doc = new ActiveXObject('htmlfile'); 
doc.open(); 
doc.write(data); 
doc.close(); 
contents = $(doc.documentElement); 
document.adoptNode(contents); 
```

我在想遞歸重建，而不是我的文檔之間相互轉移的元素，但是，似乎是一個昂貴的任務，因爲我可以有很多節點轉移。我喜歡上一個ActiveX示例，因爲這很可能在IE8和更早版本中起作用（至少對於解析來說）。

對此的任何想法？同樣，我不僅需要能夠解析head和body，但我也需要能夠對這些新元素添加到我的主要DOM。

非常感謝！

來源

2012-11-23 mateusz

回答我的問題......爲了解決我的問題，我曾經在我的帖子中提到的所有解決方案，用try/catch塊，如果瀏覽器中引發錯誤（哦，我們是如何愛你的IE！）。以下作品在IE8，IE9，Chrome 23，Firefox 17，iOS 4和5，Android 3 & 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 & adoptNode）和/或是buggy。鑑於我們的選擇器字符串被稱爲「選擇器」，下面我重新創建了找到的元素並將它們追加到'.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); 
};

來源

2012-12-07 02:12:00 mateusz

多個HTML DOM的 - 解析和使用jQuery通過Ajax傳輸數據

回答

相關問題