我试图使一个程序，从外部网站抓取所有的链接，并使用jQuery和PHP显示它们。以下是我的步骤:
- 使用php (load.php)获取页面的html
- 将html放入div
- 获取该div中的所有元素
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js">//jquery</script>
<script type="text/javascript">
$(function() { //on load
var url = "http://google.com";
$.post('load.php', { url: url},
function(html) {
$('#page').html(html); //loads html from the page into a div
var links = $('#page > a');
alert('links.length: ' + links.length); //PROBLEM: returns 0
for(var i=0; i < links.length; i++)
{
alert(links[i]);
}
});
});
</script>
</head>
<body>
<div id="page" style=""></div>
</body>
</html>
<?php
$url = $_POST['url'];
$html = file_get_contents($url);
echo $html;
?>
页面被加载到div正确，所以我知道它是抓取html，但链接。Length返回0。所以这一行有问题:
var links = $('#page > a');
但是，当我尝试用html:
将它加载到我的测试页面时<a href="http://google.com">link1</a>
<a href="http://yahoo.com">link2</a>
links.length返回2。为什么它的工作与我的测试页面，而不是谷歌?
可能是因为您的测试页面包含文档片段(只有2个链接)，而像google这样的页面包含整个文档(从doctype声明和<html>等开始)。
div元素中插入这样的html可能会破坏你的DOM。
我建议
- 解析HTML服务器端，并只将结果传递给你的JS应用程序。或
- 在iframe中加载页面(从您的服务器)并访问它的文档以获取其链接集合(
documentOfIframe.links)
除了要考虑的其他事情(如roman提到的)，如果您想找到所有的锚，请尝试:
$('#page a');
// OR
$('#page').find('a');
注意:parent > child选择所有"direct"子元素
@CHawk出于某种原因，在我看来，当您将从源中抓取的内容设置为div页面的内容时，将被视为div内的文本，而不是一堆html元素…但我很困惑，它的工作与测试页…我建议你试着拿出任何其他的HTML元素来确认这一点…我会建议一些其他的变体选项，如HTML dom解析器或使用正则表达式来获取内容…让我们知道结果如何……干杯! !