Question

我一直在使用使用jQuery的简单屏幕抓取器的想法，我想知道以下是否可行。

我有简单的HTML页面，并尝试（如果可能的话）从另一个页面中获取所有列表项的内容，如下所示：

主页：

<!-- jQuery -->
<script type='text/javascript'>
$(document).ready(function(){
$.getJSON("[URL to other page]",
  function(data){

    //Iterate through the <li> inside of the URL's data
    $.each(data.items, function(item){
      $("<li/>").value().appendTo("#data");
    });

  });
});
</script>

<!-- HTML -->
<html>
    <body>
       <div id='data'></div>
    </body>
</html>

其他页面

//Html
<body>
    <p><b>Items to Scrape</b></p>   
    <ul>
        <li>I want to scrape what is here</li>
        <li>and what is here</li>
        <li>and here as well</li>
        <li>and append it in the main page</li>
    </ul>
</body>

那么，是否可以使用jQuery从外部页面中提取所有列表项内容并将它们附加到div中？

Answer 1

使用$.ajax将其他页面加载到变量中，然后创建一个临时元素并使用.html()将内容设置为返回的值。循环遍历nodeType 1的元素子节点并保留其第一个子节点的nodeValues。如果外部页面不在您的Web服务器上，则需要使用您自己的Web服务器代理该文件。

这样的事情：

$.ajax({
     url: "/thePageToScrape.html",
     dataType: 'text',
     success: function(data) {
          var elements = $("<div>").html(data)[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
          for(var i = 0; i < elements.length; i++) {
               var theText = elements[i].firstChild.nodeValue;
               // Do something here
          }
     }
});

Answer 2

$.get("/path/to/other/page",function(data){
  $('#data').append($('li',data));
}

Answer 3

如果这是针对同一个域，那么没问题 - jQuery解决方案很好。

但是否则您无法访问任意网站的内容，因为这被视为安全风险。见same origin policy。

当然有服务器端解决方法，例如Web代理或CORS headers。如果你很幸运，他们会支持jsonp。

但是，如果您希望客户端解决方案与任意网站和Web浏览器一起使用，那么您就不走运了。有proposal to relax this policy，但这不会影响当前的网络浏览器。

Answer 4

您可能需要考虑pjscrape：

http://nrabinowitz.github.io/pjscrape/

它允许您使用javascript和jQuery从命令行执行此操作。它是通过使用PhantomJS来实现的，PhantomJS是一个无头webkit浏览器（它没有窗口，它只存在于你的脚本的使用，所以你可以加载使用AJAX的复杂网站，它就像它是真正的浏览器一样工作）

这些示例不言自明，我相信这适用于所有平台（包括Windows）。

Answer 5

使用jQuery进行简单的抓取......

// Get HTML from page
$.get( 'http://example.com/', function( html ) {

    // Loop through elements you want to scrape content from
    $(html).find("ul").find("li").each( function(){

        var text = $(this).text();
        // Do something with content

    } )

} );

Answer 6

使用YQL或Yahoo管道为原始页面html内容发出跨域请求。雅虎管道或YQL查询会将其作为JSON进行吐出，可以由jquery处理以提取和显示所需的数据。

缺点：YQL和Yahoo管道OBEY目标域的robots.txt文件如果页面很长，Yahoo Pipes正则表达式命令将无法运行。

Answer 7

I am sure you will hit the CORS issue with requests in many cases. From here try to resolve CORS issue.

var name = "kk";
var url = "http://anyorigin.com/go?url=" + encodeURIComponent("https://www.yoursite.xyz/") + name + "&callback=?";
$.get(url, function(response) {
  console.log(response);
});

使用jQuery进行简单的屏幕刮擦

7 个答案: