如何在Puppeteer的$eval回调函数中传递变量？

嘿，这个问题我之前也碰到过！核心原因是page.$eval的回调函数运行在浏览器的独立上下文里，和你的Node.js代码不在同一个环境——浏览器上下文根本不知道Node.js里定义的uid变量是什么，所以直接引用肯定会抛出ReferenceError。

要解决这个问题，其实page.$eval本身就支持显式传递外部变量，只需要利用它的第三个（及以后的）参数就行：

正确写法示例 #

const uid = 'foo@example.com'; 
// 把uid作为第三个参数传入，回调里通过第二个参数接收
await page.$eval('#uid', (el, uidValue) => el.value = uidValue, uid);

原理说明 #

• 第一个参数是选择器，用来定位DOM元素；
• 第二个参数是在浏览器上下文执行的回调函数，第一个形参是选中的DOM元素，后面的形参对应你传入的外部变量；
• 从第三个参数开始，就是你要从Node.js上下文传递到浏览器上下文的变量，这些变量会被序列化后传给回调函数。

传递多个变量的情况 #

如果需要传递多个变量，你可以把它们打包成一个对象传入，这样更清晰：

const userInfo = {
  uid: 'foo@example.com',
  username: 'testUser'
};

await page.$eval('#uid', (el, info) => {
  el.value = info.uid;
  // 还可以顺便给其他元素赋值
  document.querySelector('#username').value = info.username;
}, userInfo);

这样就能完美解决上下文隔离导致的变量访问问题啦！

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