Puppeteer中page.evaluate调用generateLink报ReferenceError求助

这个报错的核心原因很直白：page.evaluate() 的回调函数是运行在浏览器的JavaScript沙箱环境里的，而你在Node.js环境中定义的 generateLink 函数，浏览器环境根本访问不到。这两个环境就像两个独立的JS虚拟机，默认完全隔离，没法直接共享变量或函数。

另外你的代码还有个隐藏坑：Node环境里定义的 cafeArray，在 page.evaluate() 里调用 cafeArray.push() 完全无效——因为浏览器里的 cafeArray 和外部的根本不是同一个变量。

下面给你两种可行的修复方案：

方案1：将外部函数/变量传递到浏览器环境 #

page.evaluate() 支持在回调函数后面追加参数，这些参数会被序列化后传递到浏览器环境供回调使用。你可以把 generateLink、getSrc（如果这个函数也是外部定义的）以及 url 都作为参数传进去：

const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(url)
await page.waitFor(1000)

// 保留你的外部函数定义
function generateLink(url, page) {
 const arr = url.split('/');
 arr.pop()
 arr.push(page)
 return arr.join('/');
}

function getSrc(cafeArray) {
 // 这里替换成你的getSrc实际逻辑
 return cafeArray;
}

const data = await page.evaluate((generateLink, getSrc, baseUrl) => {
 const options = document.querySelectorAll('option')
 const max = options[options.length-1].innerText
 let char = 1;
 // 必须在浏览器环境内定义数组，外部的cafeArray访问不到
 const cafeArray = [];
 console.log(char);
 while(char <= Number(max)) {
 // 声明link为const/let，避免全局变量污染
 const link = generateLink(baseUrl, stringIncrease(String(char), Number(max)))
 cafeArray.push(link)
 char++;
 }
 const urls = getSrc(cafeArray);
 return urls
}, generateLink, getSrc, url); // 把外部函数和变量传入浏览器环境

console.log('data:',data)
await browser.close();
return data;

注意事项： #

• 传递的函数必须是纯函数，不能包含对Node环境变量的闭包引用（比如不能在函数里访问Node的fs模块或外部其他变量），否则序列化会失败。
• 如果 stringIncrease 也是外部定义的函数，同样需要传递到 page.evaluate() 中。

方案2：直接在浏览器环境内定义函数 #

如果函数逻辑比较简单，你可以把 generateLink 和 getSrc 的代码直接放到 page.evaluate() 的回调内部，这样浏览器环境就能直接访问到它们：

const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(url)
await page.waitFor(1000)

const data = await page.evaluate((baseUrl) => {
 // 在浏览器环境内定义generateLink
 function generateLink(url, page) {
 const arr = url.split('/');
 arr.pop()
 arr.push(page)
 return arr.join('/');
 }

 // 同样在内部定义getSrc
 function getSrc(cafeArray) {
 // 替换成你的getSrc实际逻辑
 return cafeArray;
 }

 const options = document.querySelectorAll('option')
 const max = options[options.length-1].innerText
 let char = 1;
 const cafeArray = [];
 console.log(char);
 while(char <= Number(max)) {
 const link = generateLink(baseUrl, stringIncrease(String(char), Number(max)))
 cafeArray.push(link)
 char++;
 }
 const urls = getSrc(cafeArray);
 return urls
}, url); // 只需要传入baseUrl即可

console.log('data:',data)
await browser.close();
return data;

这种方案避免了序列化传递的麻烦，适合逻辑简单的场景。

核心记住：page.evaluate() 的回调是在浏览器里跑的，和你的Node.js代码不在同一个环境，所有需要用到的函数、变量都要明确“带进”浏览器环境里才行。

内容的提问来源于stack exchange，提问作者Phạm Huy Hoàng