假设我可以获得html响应(解决了跨域问题),如何在完整的html文档中使用jQuery？
示例是这样的(here is a full gist with a remote example)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Parent Page wanting to Parse Children</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<Meta name="keywords" content="parent,html,parsing">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
// data looks like this:
var html = ""
html += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
html += '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'
html += ' <head> '
html += ' <title>Sub Page to Parse</title> '
html += ' <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><\/script>'
html += ' <Meta name="keywords" content="parent,parsing"> '
html += ' </head> '
html += ' <body> '
html += ' <script type="text/javascript"> '
html += ' alert("im javascript"); '
html += ' setTimeout(function() { '
html += ' $("body").css("background-color","#ffaaaa") '
html += ' },400); '
html += ' <\/script> '
html += ' <div id="child_div"></div> '
html += ' </body> '
html += '</html>'
// this works fine:
// $("#parent_div").append(html);
// $("#child_div")
// .width(100)
// .height(100)
// .css("background-color","yellow")
// .append("<p>child text</p>");
// ... but that's not what I am trying to do...
// reason being: i don't want to add this sub-html page to the dom...
// I just want to scrape it for data...
// I want to do this,but I am getting null for every case:
var Meta = $(html).find("Meta");
alert(Meta.html());
var title = $(html).find("title");
alert(title.html());
});
</script>
<div id="parent_div"></div>
</body>
</html>
问题是,var child_body = $(data).find(“body”);不给我任何东西.我不确定如何使用jQuery遍历这个完整的html文档.我试图删除<！DOCTYPE ...>标签,但这没有太大作用.
这样的事情可能吗？
我一直在搞乱John Resig’s Javascript HTML Parser,但这还没有涵盖它.
是否有更适合的XPath javascript库？
解决方法
这就是他们如何处理.innerHTML调用,这是jQuery uses internally时的jQuery uses internally.
Here’s a quick test page using the exact HTML you have,以及一些浏览器的结果：
Chrome 6(运行alert(),几乎可以删除所有内容)：
<div id="child_div"></div>
>结果：
>整个< head>和内容剥离,没有什么可得到的
IE8(运行alert(),它保留< Meta>,但作为顶级元素,test it in IE here)：
<Meta name=keywords content="parent,parsing"> <DIV id=child_div></DIV>
>结果：
> $(html).filter(“Meta”).attr(“name”)：“keywords”
>< title>被剥夺了
Firefox 3.6(运行alert(),保留< head>内容,但同样作为顶级元素,test it here)：
<title>Sub Page to Parse</title> <Meta name="keywords" content="parent,parsing"> <div id="child_div"></div>
>结果：
> $(html).filter(“Meta”).attr(“name”)：“keywords”
> $(html).filter(“title”).html()：“Sub Page to Parse”
Opera 10.6(运行alert(),仅剥离脚本,test it here)：
<head> <title>Sub Page to Parse</title> <Meta name="keywords" content="parent,parsing"> </head> <div id="child_div"></div>
>结果：
> $(html).find(“Meta”).attr(“name”)：“keywords”
> $(html).find(“title”).html()：“Sub Page to Parse”
所以问题不是jQuery per-say,而是不同的浏览器在他们的.innerHTML方法中做了什么来去掉他们想要的东西.这使得解析< head>中的任何内容特别不可靠,请注意,当它保留时,它可能是也可能不是顶级元素,例如$(html).length会有所不同.
我会说你在这里有两个选择,但两者看起来都不太吸引人：
>通过服务器端呼叫发出请求,它会获得您想要的信息
>自己解析HTML,但是你不会从那个部门的jQuery中获益
对不起,答案很糟糕,但似乎跨浏览器问题,除非你自己解析,这将成为杀手,并使jQuery无用.
