如何获取Puppeteer返回值及解决frame.evaluate中chunk未定义报错

1. frame.evaluate 访问外部变量报错的原因与解决方案 #

报错原因 #

frame.evaluate() 传入的回调函数会被 Puppeteer 序列化后发送到浏览器沙盒环境执行，和 Node.js 本地运行环境完全隔离，无法直接访问 Node.js 上下文定义的 chunk、a 等变量，因此会抛出 ReferenceError: chunk is not defined 错误。

解决方法 #

将需要传递到浏览器侧的变量，作为 evaluate 方法的后续入参按顺序传入，在回调函数的对应位置接收即可。

2. 如何获取 Puppeteer evaluate 的返回值 #

evaluate 方法的返回值就是浏览器侧回调函数 return 的内容，Puppeteer 会自动完成序列化/反序列化处理，直接用 await 接收即可。
注意：仅可返回可序列化的内容，函数、DOM节点等无法序列化的内容不能直接返回，如需获取DOM节点可使用evaluateHandle方法。

修正后完整代码 #

const puppeteer = require('puppeteer');
const chunk = ["google.com","facebook.com","gmail.com","stackoverflow.com"];

(async () => {
    // 建议全局只启动一次浏览器，避免重复启动损耗性能
    const browser = await puppeteer.launch({headless:false})
    for(let a = 0; a < chunk.length; a++){
      const currentDomain = chunk[a]
      const page = await browser.newPage();
      // 这里需要补充你自己的页面跳转逻辑，否则页面为空找不到frame
      // await page.goto('你的目标页面地址')
      const iframeHandle = await page.$("frame[name='main']");
      const frame = await iframeHandle.contentFrame();
      console.log('当前检测域名：', currentDomain);
      // 传入变量并接收返回值
      const isMatch = await frame.evaluate((targetDomain) => {
        const tableHtml = document.querySelector("#content > table")?.innerHTML || ''
        const hasTarget = tableHtml.indexOf(targetDomain) > -1
        if(hasTarget) {
          console.log('浏览器侧匹配到：', targetDomain)
        }
        return hasTarget
      }, currentDomain)
      // 外层拿到返回值可做后续处理
      console.log('匹配结果：', isMatch ? '匹配成功' : '匹配失败')
      await page.close()
    }
    await browser.close()
})()

额外优化建议 #

• 避免在循环中重复启动/关闭浏览器，全局启动一次即可，每次循环仅新开/关闭页面，可大幅提升执行效率
• 用let代替var定义循环变量，避免变量提升导致的意外作用域问题
• 增加页面存在性、DOM节点存在性判断，避免空值报错

内容的提问来源于stack exchange，提问作者aliveli50