首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用NodeJS Puppeteer滚动多个页面,但只滚动了1个页面,其他页面没有滚动

NodeJS Puppeteer是一个基于Node.js的无头浏览器库,可以模拟用户在浏览器中的操作。它提供了一系列的API,可以用于实现自动化的网页操作,包括滚动页面。

要实现滚动多个页面,可以使用Puppeteer的页面.evaluate()方法来执行JavaScript代码,通过修改页面的scrollTop属性来实现滚动。以下是一个示例代码:

代码语言:txt
复制
const puppeteer = require('puppeteer');

async function scrollMultiplePages() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 打开第一个页面
  await page.goto('https://www.example.com/page1');

  // 滚动第一个页面
  await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });

  // 等待一段时间,使页面加载完成
  await page.waitForTimeout(2000);

  // 打开第二个页面
  await page.goto('https://www.example.com/page2');

  // 滚动第二个页面
  await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });

  // 等待一段时间,使页面加载完成
  await page.waitForTimeout(2000);

  // 打开第三个页面
  await page.goto('https://www.example.com/page3');

  // 滚动第三个页面
  await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });

  // 等待一段时间,使页面加载完成
  await page.waitForTimeout(2000);

  // 关闭浏览器
  await browser.close();
}

scrollMultiplePages();

上述代码中,我们首先创建了一个浏览器实例,并打开了第一个页面。然后,使用page.evaluate()方法执行JavaScript代码,将页面滚动到底部。接着,等待一段时间,使页面加载完成。然后,重复以上步骤,打开并滚动其他页面。

需要注意的是,为了确保页面加载完成后再进行滚动操作,我们使用了page.waitForTimeout()方法来等待一段时间。根据实际情况,可以调整等待的时间长度。

关于Puppeteer的更多信息和详细的API文档,可以参考腾讯云的产品介绍页面:Puppeteer - 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于Apify+node+reactvue搭建一个有点意思的爬虫平台

: 笔者要实现的爬虫主要使用了Apify集成的Puppeteer能力, 如果对Puppeteer不熟悉的可以去官网学习了解, 本文模块会一一列出项目使用的技术框架的文档地址....当我们使用nodejs作为后台服务器时, 由于nodejs本身是单线程的,所以当爬取请求传入nodejs时, nodejs不得不等待这个"耗时任务"完成才能进行其他请求的处理, 这样将会导致页面其他请求需要等待该任务执行结束才能继续进行...如何截取整个网页快照 我们都知道puppeteer截取网页图片只会截取加载完成的部分,对于一般的静态网站来说完全没有问题, 但是对于页面内容比较多的内容型或者电商网站, 基本上都采用了按需加载的模式,...核心思路就是利用puppeteer的api手动让浏览器滚动到底部, 每次滚动一屏, 直到页面滚动高度不变时则认为滚动到底部.具体实现如下: // 滚动高度 let scrollStep = 1080;...项目使用的技术文档地址 apify 一款用于JavaScript的可伸缩的web爬虫库 Puppeteer koa -- 基于nodejs平台的下一代web开发框架 最后 如果想学习更多H5游戏, webpack

2.2K20
  • Puppeteer 实现简书文章备份

    读了篇文章 《前端使用 puppeteer 爬虫生成《React.js 小书》PDF并合并》。参照这个思路,可以用 Puppeteer 备份简书的文章。 呈现效果: ?...生成一个导航页面。该页面上的链接,可以看到每篇文章截图。 主要的实现代码 抓取该用户所有的文章。需要程序将页面滚动到底部,去拿所有文章。...代码如下: let articles = await page.evaluate(async () => { // 将页面滚动到最底部 await new Promise((resolve, reject...解决方案: 程序将页面往下每过一段时间往下滚动到不能滚动为止。 pfd 里插图片的问题 开始是想做一篇文章生成一个PDF,然后把所有的PDF再拼成一个PDF的。...发现PDF插入图片,如果图片处于跨页位置或图片高度超过一页PDF的高度时,会自动裁切。效果不好,就放弃PDF了。 解决方案: 用图片来做截屏。

    1.4K20

    【兼容性】H5滚动穿透解决方案

    ; } PC 可以,但是对移动端无效 那么我们限制body不超过一屏,那么自然就不能滚动了?...,这样就可以避免页面的跳动,但是直接给 html 设置 absolute 风险太大,容易埋坑,不太建议大项目使用,小应用还是可以的,我在需求的小活动页7就使用过这种方式 5禁用页面滚动 除了在 css...这个问题测试了,在 ios 中存在,滚动穿透的顺序是 子->父->document,而 安卓和 鸿蒙 则不会,子不了,直接document 这个是实际的dom 父子关系才会,视觉上的 父子关系没有这个问题...但是子元素 调用了 stopPropagation() 之后,不仅元素可以滚了,还会导致滚动穿透(毕竟只要元素能就能发生穿透) 但是document 还是不会滚动的 3滚动穿透的触发条件 一次没有抬起的滚动行为...(手没有离开屏幕)导致元素滚动到顶部或者 底部之后,如果手还在屏幕上往两端滑,并不会触发滚动穿透 如果你把元素滚动到 两端不可之后,抬起手,再按下去,往不可的方向移动,此时才会发生 滚动穿透 之前我们说了

    5.7K20

    探索Puppeteer的强大功能:抓取隐藏内容

    本文将介绍如何使用Puppeteer抓取网页中的隐藏内容,并结合爬虫代理IP、useragent、cookie等设置,确保爬取过程的稳定性和高效性。...抓取隐藏内容的几种方式在实际应用中,隐藏内容可能是通过点击按钮、滚动页面等操作后才会显示。Puppeteer允许我们模拟这些用户操作,从而获取隐藏的内容。下面将介绍几种常见的抓取隐藏内容的方法。1....滚动页面加载内容某些页面通过滚动加载更多内容,比如无限滚动的社交媒体页面。在这种情况下,我们可以模拟滚动操作。...实例代码以下是一个综合实例代码,展示如何使用Puppeteer抓取隐藏内容,并结合爬虫代理、User-Agent和Cookie设置。...const puppeteer = require('puppeteer');(async () => { // 使用爬虫代理标准版 const proxy = { host:

    10610

    React中将一直增加消息的滚动框保持在当前浏览的位置

    通常需要一个滚动框来展示所有消息,且每次的新消息都会展示在框的顶部,同时这个消息滚动框还是可以拖动鼠标浏览的。...解决思路如下:在新消息来了更新页面前,获取当前页面的高度A,更新完成后,用新的页面高度B减去之前的页面高度A得出值C,C的值即为滚动条因为新增了消息自动滚动了多少,然后在更新完成后的页面上获取scrollTop...此时新消息来了,就可以保证我们当前浏览的消息相对整个滚动框仍然保持以前的位置。 其实很简单,但是讲起来有点绕,不知道我有没有说清楚,没有听明白的放学别走来找我。  以下是代码实现,方便大家抄作业。...// 卸载时清除定时器 componentWillUnmount() { window.clearInterval(this.interval); } // 更新前获取当前的滚动高度...const scrollTop = this.rootNode.scrollTop; if (scrollTop < 5) { return; } // 将滚动高度加上一个变化后的页面高度

    69140

    【移动端bug】iOS 下 Input 和 fixed 的问题

    2探索一下原因 正如我上面说,只有在定位元素的输入框被激活时,页面仍有很多内容,仍能往上的时候,才出现光标错位的问题 那么 首先,观察一哈这个光标错位时的位置 好像是键盘没有唤起时,定位元素输入框的位置啊...然后我们还需要明确一个事情,就是 当激活定位元素的输入框时,页面没有内容了,无法往上的时候 那么是不会出现光标错位的问题的,像下面这样 ?...说明实际DOM 的位置也被顶上去了,没有停留在原地 上面我们知道,光标错位的时定位元素实际dom停在了原地 所以我想知道会不会页面文档上虽然看着是往上滚动了,但是Dom也还是停在原地 所以也要证明一下...,是不会出现光标错位的 是不是说明,只要页面无法滚动了,那么就能解决光标错位的问题?...否则多个输入框切换的时候,每次切换都会scrollTop滚动没必要,应该要等到当前完全没有输入框聚焦时才开始滚动,所以让 focus 和 blur 相互抵消 class Ios13FixDomMisplace

    4.3K61

    Android开发笔记(一百三十五)应用栏布局AppBarLayout

    可是仅仅使用Toolbar的话,还是有些呆板,比如说Toolbar固定占据着页面顶端,既不能跟着主体页面移上去,也不会跟着主体页面拉下来。...3、大家都知道ViewPager是左右滚动的翻页视图,用户通过手势把页面横向拉动一段距离后松开,系统会判断接下来是自动左还是自动右,总之最后用户看到的是一个完整的页面,而不是拉到一半的页面。...scroll标志是基础标志,其他标志都要配合该标志使用;因为只有通过scroll声明Toolbar是可以滚动的,才有后面的各种各样滚动。...如果仅仅声明scroll,没有声明其它标志,则滚动效果如下图所示: ? 2、enterAlways : 头部与主体先一起滚动,头部滚到位后,主体继续向上或者向下。...4、enterAlwaysCollapsed:该标志一般跟enterAlways一起使用,它与enterAlways区别在于有折叠操作,而单独的enterAlways没有折叠。

    2K40

    如何使用Puppeteer在Node JS服务器上实现动态网页抓取

    动态网页抓取的难点在于如何处理网页上的异步事件,如点击、滚动、等待等。...Browser对象可以创建多个Page对象,每个Page对象对应一个浏览器标签页,可以用来加载和操作网页。Page对象提供了一系列的方法,可以模拟用户的各种行为,如输入、点击、滚动、截图、PDF等。...库,并使用它来启动浏览器和创建页面:// 引入puppeteer库const puppeteer = require('puppeteer');// 启动浏览器并创建页面(async () => {...密码 }); // 创建页面 const page = await browser.newPage();})();创建页面后,就可以使用page对象的方法来加载和操作网页。...例如,可以使用page.goto(url)方法来访问一个网址,并等待网页加载完成:// 访问一个网址,并等待网络空闲(即没有超过500ms的请求)await page.goto('https://www.example.com

    79010

    Js处理滚动条和日期框

    有些时候它做不到,你又没有滚动,这个时候报个不可见的错误。这个不可见的错误,不是说元素在你的页面没有显示出来,而是不是在我们的视觉效果以内,其实是没有在设备的可视区域之内。...例如元素在页面正中间,想将它滚动到可见区域,必须有向上和向下这2种做法。 如果你希望他向上。 一种,.scrolllntoView()默认跟页面顶部对齐: ?...如果系统没有遮罩层,随便用,有遮罩层就只能用底部。 一般来说,会用顶部,默认的不传参,情非得已的情况下才会传参。 10)如何判定这个页面需要不需要这种滚动操作呢?...如果你的被测系统某一个页面当中,因为太长了出现了滚动条,怎么做呢? 第一次,先不滚动,元素在页面最底部,去执行这样的代码,如果它没有报错,那就不用滚动了,直接用就好。...6)原因是开发直接设置它的value属性没有页面中显示出来。 ? 因为html页面没有innerText: ? 在value里面可以看到: ? Elements这里没有显示value属性: ?

    10.9K10

    如何从 0 到 1 搭建性能检测系统(修正版)

    百策采集页面性能数据的实现方案 百策实现页面性能数据采集的方案主要依靠无头浏览器 Puppeteer 结合 Lighthouse,Puppeteer 是 Chrome 团队提供的一个无界面 Chrome...*/ async run(runOptions: RunOptions) { const gathererResults = {}; // 使用 Puppeteer 创建无头浏览器,创建页面...○ 打开页面 如何在 Puppeteer使用 Lighthouse 可以参考 Using Puppeteer with Lighthouse (https://github.com/GoogleChrome...在政采云,前台页面我们使用的框架是 Vue, 中台页面使用的是 React(部分页面由于历史原因用的还是 jQuery)。所以大致可以根据框架来区分模型。.../audits/${this.meta.id}`).then(m => m.default); // 执行每个计算方法文件中的 audit 方法,计算得分,比如没有横向滚动条的时候得5分,有横向滚动条不得分

    2.9K51

    吸顶效果解决方案

    监听滚动判断位置的方法完全失效,平滑吸顶效果变成了过临界位置直到停止滚动时,吸顶元素跳到目标位置,体验非常差,不可忍受 scroll不能用,还可以有一些奇怪的思路,比如定时器读scrollTop,touchmove...,iscroll等等 有前辈做了详细测试,见参考资料1 定时器在手指没有离开屏幕时不会执行,touchmove触发频率足够,也能拿到scrollTop,touchend后,惯性滚动期间,没有任何事件可用...webkit-sticky; position: sticky; // 吸顶时的定位 top: 0; left: 0; // z比下方所有z高 z-index: 9999; } 没有过初始位置时...static能为后代元素提供定位参照),top和left无效 过初始位置时,和position: fixed表现类似,top和left生效,固定在屏幕可见区域,页面不会抖动,原本占据的空间还在(自带守家占位符的感觉...,让页面滚动,转到吸顶状态,多个tab列表无缝切换,浏览状态互不影响 吸顶状态时划动当前tab列表,到头,让页面滚动,转到非吸顶状态 也就是说,非吸顶状态时,让tab列表不能滚动(overflow-y:

    3.4K10

    使用 requestAnimationFrame 解决滚动点停误触和 scroll 事件延迟

    背景 在手机端网页开发过程中,我们经常会遇到滚动点停误触的问题,最开始想到的解决办法就是判断当前页面(DOM)是否在滚动,如果在滚动,就取消点击或者其他事件。...于是想到了使用 requestAnimationFrame 判断某个元素的位置是否发生变化来标识当前页面(DOM)是否在滚动。...不能正确获取 scroll 事件就无法正确判断当前页面是否正在滚动。看起来我们陷入了僵局。 新的解决方案 我们放弃 scroll 事件,使用别的方式判断页面是否滚动。...最先想到的就是通过获取某个元素的相对位置,如果在两帧之内位置没有发生变化,那不就证明了当前页面已经不滚动了吗。...使用 requestAnimationFrame 并且在 touchend 后触发检查机制,对页面性能也不会造成太大的影响。目前来看是不错的解决方案。

    94720

    实践指南-网页生成PDF

    在浏览器中手动执行的大多数操作都可以使用 Puppeteer 完成,比如: 生成页面的屏幕截图和 PDF; 爬取 SPA 并生成预渲染的内容(即 SSR); 自动进行表单提交,UI 测试,键盘输入等;...,没有可连接的浏览器,因此选择安装的是 puppeteer。...waitUntil 表示页面加载到什么程度可以开始生成 PDF 或其他操作了,当网页需加载的图片资源较多时,建议设置为 networkidle2,有以下值可选: load:当 load 事件触发时; domcontentloaded...解决方法是跳转到页面后,将页面滚动到底部,所有图片资源都会得到请求,waitUntil 设置为 networkidle2,图片就能加载成功了。...await autoScroll(page) // 因为文章图片引入了懒加载,所以需要把页面滑动到最底部,保证所有图片都加载出来 /** * 控制页面自动滚动 * */ function autoScroll

    2.4K41

    滚动穿透的6种解决方案【已自测】

    在移动端中,如果我们使用了一个固定定位的遮罩层,且其下方的dom结构的宽度|高度超出屏幕的宽度|高度,那么即使遮罩层弹出后铺满了整个屏幕,其下方的dom结构依然可以滚动,这就是大家所说的“滚动穿透”。...ps:我偷懒直接js控制了行间样式,标准写法应该是给body添加类名来控制 局限问题: body滚动后再触发弹层,会使body页面回滚到顶部。...但是,也因为加了position: fixed;出现了新问题: 它会导致触发弹层后,body回、定位到顶部。...加一个属性 -webkit-overflow-scrolling: touch;/* 解决在IOS上滚动惯性失效的问题 */ 但是这只是简单地解决了一个问题:实现了滑动弹窗其他地方(蒙层背景),底部body...局限问题: 因为touchmove被禁掉了,就会造成弹窗内部所有位置都不能响应touchmove事件,效果上就是弹窗内部不能再滚动了。 赘述: 在弹层不需要超出滚动的情况下,才可以使用这个。

    13.6K31

    JavaScript基础

    style.backgroundColor="orange"; // 仅IE浏览器支持 // console.log(box2.currentStyle.backgroundColor) // 在其他浏览器中可以使用...事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能 我们希望,绑定一次事件,即可应用到多个的元素上,即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素 target :...//向上 120 向下 -120 //wheelDelta这个值我们不看大小,看正负 //alert...location = "http:[www.baidu.com"](http://www.baidu.com"/); location = "01.BOM.html"; 属性 解释 assign() 用来跳转到其他页面...,作用和直接修改location一样 reload() 用于重新加载当前页面,作用和刷新按钮一样,如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面 replace() 可以使用一个新的页面替换当前页面

    2K20

    Selenium 与 Puppeteer 能被网站探测的几十个特征

    实际上,Selenium 启动的浏览器,有几十个特征可以被网站通过 JavaScript 探测到。Puppeteer 启动的浏览器,也有很多特征能够被网站探测。 如果你不相信,那么我们来做一个实验。...首先你使用正常的浏览器打开如下网址:https://bot.sannysoft.com/。可以看到,页面的内容如下: 这个页面很长,你得滚动鼠标往下看。大部分都是绿色的。...接下来,使用Selenium启动一个 Chrome 的有头模式,再打开这个页面看看效果: 一开始WebDriver这一项就标红了,说明网站成功检测到你使用模拟浏览器了。...既然 Selenium 不行,那 Puppeteer 或者 Pyppeteer怎么样呢?我们使用 Pyppeteer 来做个实验。直接启动无头模式并截图。...爬点没有安全意识的小网站可以。爬那些有强大安全团队和法务团队的公司,你就是在找死。

    11.5K42
    领券