如何在Puppeteer的page.evaluate方法中正常加载并使用jQuery？

你遇到的jQuery加载失败通常有两个核心原因：

• 目标站点开启了内容安全策略（CSP），禁止从外部CDN加载未被信任的脚本资源
• 你使用的jQuery CDN地址在爬取环境下网络访问不通，或者加载完成后站点全局的$符号被其他框架占用

修复方案 #

方案1：绕过CSP拦截（最常用） #

在创建页面后、跳转目标URL前，添加绕过CSP的配置，避免外部脚本被拦截：

let page = await browser.newPage();
// 新增下面这行，绕过页面的内容安全策略
await page.setBypassCSP(true);
await page.goto(url, {waitUntil: 'networkidle2'});

如果修改后还是报错，改用本地注入jQuery的方案，完全不依赖外部CDN。

方案2：本地注入jQuery（无外部依赖，稳定性最高） #

提前把jQuery的min版源码保存到本地同目录下的jquery.min.js文件，然后用path参数加载本地文件，避免CDN访问失败的问题：

await page.addScriptTag({path: './jquery.min.js'});

如果不想保存本地文件，也可以直接把jQuery的min版源码作为字符串传入content参数：

// jqueryContent为jQuery 3.2.1 min版的完整源码字符串
await page.addScriptTag({content: jqueryContent});

方案3：兼容$符号冲突 #

如果站点本身已经加载了Prototype等占用$符号的库，可以在evaluate内部优先做兼容判断，避免调用失败：

await page.evaluate( () => {
    // 优先用$，如果$不是jQuery就用jQuery全局对象
    const $ = window.$ || window.jQuery;
    var classes = $( "td:contains('Lec')")
    classes = classes.not('.Comments')
    classes = classes.not('.Pct100')
    classes = Array.from(classes)
});

完整可运行代码 #

const puppeteer = require('puppeteer');

(async() => {
  let url = "[你正在爬取的网站地址]"
  let browser = await puppeteer.launch({headless:false});
  let page = await browser.newPage();
  // 绕过CSP，避免注入脚本被拦截
  await page.setBypassCSP(true);
  await page.goto(url, {waitUntil: 'networkidle2'});
  // 加载本地jQuery文件
  await page.addScriptTag({path: './jquery.min.js'})
  await page.evaluate( () => {
      const $ = window.$ || window.jQuery;
      var classes = $( "td:contains('Lec')")
      classes = classes.not('.Comments')
      classes = classes.not('.Pct100')
      classes = Array.from(classes)
      // 后续处理逻辑
  });
  await browser.close();
})();

内容的提问来源于stack exchange，提问作者Daniel-G