JavaScript中要实现爬虫抓取动态滚动条加载的内容Puppeteer

我不是女神ヾ 2024-04-20 12:09 67阅读 0赞

在JavaScript中，要实现爬虫抓取动态滚动条加载的内容（即滚动到页面底部时自动加载更多内容的网页），通常需要模拟用户滚动行为，并等待页面内容动态加载完成。由于浏览器环境下的JavaScript并不支持直接用于生产环境的网络爬虫，这里介绍一个基于Puppeteer（Node.js库）的方法：

const puppeteer = require('puppeteer');
    
    async function scrollPageAndScrapeContent(url) {
        
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
    
      // 设置视窗大小，根据实际网站调整
      await page.setViewport({
         width: 1366, height: 768 });
    
      // 访问目标网址
      await page.goto(url);
    
      // 模拟滚动到底部并等待一段时间以加载更多内容
      while (true) {
        
        await page.evaluate(() => {
        
          window.scrollBy(0, document.body.scrollHeight);
        });
        await page.waitForTimeout(2000); // 等待页面加载新内容，时间可以根据实际情况调整
    
        // 判断是否还有更多内容加载
        const hasMoreContent = await page.evaluate(() => {
        
          return document.querySelector('.infinite-scroll-request') !== null; // 根据具体网站判断是否有更多内容加载的标志元素
          // 请替换为你的目标网站上代表有更多内容加载的CSS选择器
        });
    
        if (!hasMoreContent) break; // 如果没有更多内容，则跳出循环
    
        // 在这里可以添加对新加载内容进行抓取和处理的代码
        // ...
      }
    
      // 执行你所需的页面内容抓取操作
      const content = await page.evaluate(() => {
        
        // 抓取页面上的内容
        // ...
        return someContent; // 返回你需要的数据
      });
    
      await browser.close();
    
      return content;
    }
    
    scrollPageAndScrapeContent('http://example.com')
      .then(content => console.log(content))
      .catch(error => console.error(error));

这段代码首先使用Puppeteer启动一个浏览器实例，然后打开指定URL的页面，并通过模拟滚动到底部以及检查特定的加载更多内容的标志来决定是否继续滚动。最后，在所有内容加载完毕后执行抓取逻辑。

请注意，针对不同的网站，可能需要根据其具体的滚动加载机制和内容加载标识进行相应的调整。同时，确保遵守相关法律法规和网站的服务条款，不要滥用此类技术对不允许爬取的网站进行爬虫操作。

发表评论取消回复

表情：

评论列表（有 0 条评论，67人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中要实现爬虫抓取动态滚动条加载的内容Puppeteer

在JavaScript中，要实现爬虫抓取动态滚动条加载的内容（即滚动到页面底部时自动加载更多内容的网页），通常需要模拟用户滚动行为，并等待页面内容动态加载完成。这段代码首...

我不是女神ヾ/ 2024年04月20日 12:09/ 0 赞/ 68 阅读

相关根据滚动条位置加载更多内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

- 日理万妓/ 2023年08月17日 16:38/ 0 赞/ 146 阅读

相关 JavaScript实现无限滚动加载瀑布流

实现思路 JS无限瀑布流的实现，先定义两个div，通过css把父div设置为相对定位，子div设置为绝对定位（子绝父相），通过js改变div的相对定位，来实现瀑布流的加载

男娘i/ 2023年03月04日 05:25/ 0 赞/ 78 阅读

相关滚动条加载分页数据

<div id="listBody"> </div> listBody 数据外最大的盒子 data(){ return{ page: {

亦凉/ 2022年09月04日 11:56/ 0 赞/ 361 阅读

相关 javascript动态加载

将所有<script>标签放置在页面底部，紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。将脚本成组打包。页面的<scri

女爷i/ 2022年08月07日 03:37/ 0 赞/ 263 阅读

相关 jquery滚动条加载数据

//滚动条 $(window).scroll(function () \{ var scrollTop = $(this).scrollTop(); var s

快来打我*/ 2022年07月11日 16:04/ 0 赞/ 342 阅读

相关 jQuery实现页面滚动时动态加载内容的方法

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。具体分析如下：很多网站，比如twitter，京东商城首页，会在页面滚动到一定的位置时才动态

悠悠/ 2022年07月11日 16:03/ 0 赞/ 445 阅读

相关滚动条滚动异步加载数据

<script type="text/javascript"> //获取列表中的原有内容 var content=document.get

待我称王封你为后i/ 2022年05月24日 07:15/ 0 赞/ 471 阅读

相关 vue实现滚动条加载更多数据

原理： 1、参考线位置lineHeight：即判断滚动到何处触发事件； 2、页面卷入的高度scrollHeight； 3、浏览器窗口的高度windowHeig

Myth丶恋晨/ 2022年04月06日 05:56/ 0 赞/ 621 阅读

相关 JS简单实现滚动自动加载新内容（懒加载）

加载源 // 这里存后台发来的数据 var galleryList = [ { src: "./images/1.jpeg",

秒速五厘米/ 2022年04月05日 04:40/ 0 赞/ 481 阅读