使用 jQuery 的简单屏幕抓取

IT技术 javascript jquery screen-scraping
2021-01-15 15:55:12

我一直在玩使用 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 中？

6个回答

用于$.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
          }
     }
});
@AdamYoungers：“代理文件”几乎是完整的描述。向您自己的服务器发出请求；让您自己的服务器从目标中获取请求的页面。在 Nginx 中，它将是一个proxy_pass. 如果你想在 PHP 中做到这一点，你可以使用<?php echo file_get_contents($_GET['proxy']); ?>.
2021-03-19 15:55:12
但是，请确保将代理资源的 Content-Type 列入白名单；添加并检查指示 XHR 的自定义标头；避免创建开放代理；尽可能使用 CORS，并将代理放在不同的域上。
2021-03-28 15:55:12
您能否更详细地了解“代理文件”的含义？
2021-04-11 15:55:12

使用 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

    } )

} );

$.get("/path/to/other/page",function(data){
  $('#data').append($('li',data));
}
嗨@Fareesh 这两者之间有什么区别？ .append($('li',data)) 和 .append(data)
2021-03-24 15:55:12

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

但是，否则您将无法从任意网站访问内容，因为这被视为存在安全风险。请参阅同源策略。

当然还有服务器端的解决方法，例如 Web 代理或CORS 标头。如果幸运的话，他们会支持 jsonp。

但是，如果您希望客户端解决方案与任意网站和 Web 浏览器一起使用，那么您就不走运了。有人提议放宽此政策，但这不会影响当前的网络浏览器。

@LukeMcneice 你能解释一下同源政策在 safari 和 chrome 中是怎样的吗？正确初始化是什么意思？
2021-03-15 15:55:12
有多种方法可以访问域外的内容。例如： • jsonp • 代理
2021-03-31 15:55:12
同源策略在 Safari 和正确初始化的 Chrome 上不是问题
2021-04-06 15:55:12
@hnovick - 我的帖子是针对任意网页的客户端解决方案。添加了对特定案例解决方案的确认。
2021-04-09 15:55:12

您可能需要考虑 pjscrape：

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

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

这些示例一目了然，我相信这适用于所有平台（包括 Windows）。

其它你可能感兴趣的问题
上一篇有没有办法在 JavaScript 中读取二进制数据？ 下一篇墨卡托经纬度计算（英国）裁剪地图上的 x 和 y