Question

我正在尝试创建一个程序来抓取外部网站的所有链接，并使用jQuery和PHP显示它们。以下是我的步骤：

使用php（load.php）
将该html放入div
获取该div中的所有元素

这是我的代码（index.html）：

<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代码（load.php）：

<?php
$url = $_POST['url'];
$html = file_get_contents($url);
echo $html;
?>

正确地将页面加载到div中，所以我知道它正在抓取html，但links.length返回0.所以这行有问题：

var links = $('#page > a');

然而，当我尝试使用html：

<a href="http://google.com">link1</a>
<a href="http://yahoo.com">link2</a>

links.length返回2.为什么它适用于我的测试页而不是谷歌？

Answer 1

可能是因为你的测试页面包含一个文档片段（只有2个链接），而像谷歌这样的页面包含一个完整的文档（以doctype声明和<html>开头等等......）。

将此类html插入div元素可能会破坏您的DOM。

我建议

parse the HTML serverside并将结果仅传递给您的JS应用。
OR
在iframe和access it's document中加载页面（来自您的服务器）以获取其链接集合（documentOfIframe.links）

Answer 2

要考虑的其他事项（如罗马提到的那样），如果你想找到所有的锚点，试试这个：

$('#page a');
// OR
$('#page').find('a');

注意：parent > child选择所有“直接”子元素。

Answer 3

@CHawk出于某种原因，在我看来，当你从源设置被抓取的内容时，div页面的内容将被视为div中的文本而不是一堆html元素...但我是感到困惑的是，它与测试页面一起工作...会建议你尝试拔出任何其他被删除的html元素来确认这一点...会建议一些其他变体选项，如html dom解析器或使用正则表达式来获取内容...让我们知道它是如何运作的..干杯!!

jQuery / PHP - 从外部页面抓取所有链接

3 个答案: