2010-10-19 97 views
3

我正在开发一个铬扩展,所以我对于我要求的域的XMLHttpRequests拥有跨主机权限。如何通过XMLHttpRequest从html页面创建DOM对象?

我已经使用了XMLHttpRequest并获得了一个HTML网页(txt/html)。我想使用XPath(document.evaluate)从中提取相关的位。不幸的是,我无法从html的返回字符串构造一个DOM对象。

var xhr = new XMLHttpRequest(); 
var name = escape("Sticks N Stones Cap"); 
xhr.open("GET", "http://items.jellyneo.net/?go=show_items&name="+name+"&name_type=exact", true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
    var parser = new DOMParser(); 
    var xmlDoc = parser.parseFromString(xhr.responseText,"text/xml"); 
    console.log(xmlDoc); 
    } 
} 

xhr.send(); 

console.log将在Chromium JS控制台中显示调试内容。

在上述JS控制台中。我得到这个:

Document 
<html>​ 
<body>​ 
<parsererror style=​"display:​ block;​ white-space:​ pre;​ border:​ 2px solid #c77;​ padding:​ 0 1em 0 1em;​ margin:​ 1em;​ background-color:​ #fdd;​ color:​ black">​ 
<h3>​This page contains the following errors:​</h3>​ 
<div style=​"font-family:​monospace;​font-size:​12px">​error on line 1 at column 60: Space required after the Public Identifier 
​</div>​ 
<h3>​Below is a rendering of the page up to the first error.​</h3>​ 
</parsererror>​ 
</body>​ 
</html>​ 

因此,如何是我该使用XMLHttpRequest - >接收HTML - >转换为DOM - >使用XPath横向?

我应该使用“隐藏的”iframe hack来加载/接收DOM对象吗?

+0

我使用IFRAME技术在我们的web应用程序中加载HTML。它速度很快,即使在IE8上也能正常运行。当你在DOM中时,你可以使用CSS选择器代替Xpath。 – Mic 2010-10-19 21:44:39

+0

@Mic谢谢。我会尽力解决这个问题。这只是我在做几页数据的屏幕截图,XPath是一个真正的奇迹=)允许你从任何表格中获得所有类似的数据。 – Dima 2010-10-19 21:48:40

+0

CSS选择器是用于HTML的,Xpath是用于XML的,但多一点人力:) – Mic 2010-10-19 22:03:44

回答

2

DOMParser在DOCTYPE定义上窒息。它也会出现任何其他非xhtml标记,例如<link>而没有结束/。你有权控制正在发送的文件吗?如果没有,最好的办法是把它解析为一个字符串。使用正则表达式来查找您要查找的内容。

编辑:你可以在浏览器通过将其注入隐藏div来解析主体的内容对您:

var hidden = document.body.appendChild(document.createElement("div")); 
hidden.style.display = "none"; 
hidden.innerHTML = /<body[^>]*>([\s\S]+)<\/body>/i(xhr.responseText)[1]; 

现在搜索里面hidden找到你要找的内容:

var myEl = hidden.querySelector("table.foo > tr > td.bar > span.fu"); 
var myVal = myEl.innerHTML; 
+0

不,我无法控制正在发送的文档。我有点困惑。对于同一个页面,我可以获得'document'对象,但是如果将它作为字符串传递给我,我无法得到它? – Dima 2010-10-19 22:10:20

+0

直到它被浏览器解析,它只是一个字符串。为了让浏览器解析它,将html注入到页面上的隐藏div中,然后在div中搜索你正在寻找的任何东西。 – gilly3 2010-10-19 22:23:58