提问人：Cat Burston 提问时间：9/7/2017 最后编辑：starballCat Burston 更新时间：10/11/2023 访问量：147625
如何将变量传递到评估函数中？
How can I pass variable into an evaluate function?
问：
我正在尝试将变量传递到 Puppeteer 中的函数中，但是当我使用以下非常简化的示例时，该变量未定义。page.evaluate()evalVar
我找不到任何可以构建的示例，因此我需要帮助将该变量传递到函数中，以便我可以在其中使用它。page.evaluate()
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
const evalVar = 'WHUT??';
try {
await page.goto('https://www.google.com.au');
await page.waitForSelector('#fbar');
const links = await page.evaluate((evalVar) => {
console.log('evalVar:', evalVar); // appears undefined
const urls = [];
hrefs = document.querySelectorAll('#fbar #fsl a');
hrefs.forEach(function(el) {
urls.push(el.href);
});
return urls;
})
console.log('links:', links);
} catch (err) {
console.log('ERR:', err.message);
} finally {
// browser.close();
}
})();
答：
427赞
flozia
9/7/2017
#1
您必须将变量作为参数传递给如下所示：pageFunction
const links = await page.evaluate((evalVar) => {
console.log(evalVar); // 2. should be defined now
...
}, evalVar); // 1. pass variable as an argument
您可以通过将更多参数传递给 ：page.evaluate()
await page.evaluate((a, b c) => { console.log(a, b, c) }, a, b, c)
参数必须可序列化为浏览器内对象的 JSON 或 JSHandles：https://pptr.dev/#?show=api-pageevaluatepagefunction-args
评论
10赞
chitzui
11/15/2017
您好，您将如何传递多个变量？
6赞
chitzui
11/15/2017
另外，我真的无法传递一个函数：var myFunction = function（） { console.log（“hello”） };等待 page.evaluate（func => func（）， myFunction）;给我：..为什么？Evaluation failed: TypeError: func is not a function
2赞
Flimm
11/7/2019
不要忘记在函数参数签名中键入两者，并作为传递给的参数（在代码示例的末尾）。evalVarevaluate
3赞
knod
1/29/2020
@chitzui：不能将函数传递给 。据说你可以用 “暴露”它。有关详细信息，请参阅 stackoverflow.com/a/58040978。pate.evaluate()page.exposeFunction
1赞
Dominik Matis
6/6/2021
迟到，但@chitzui，可以是一个数组，因此您可以在那里传递多个值evalVar
92赞
Mehdi Raash
12/2/2017
#2
我鼓励你坚持这种风格，因为它更方便、更易读。
let name = 'jack';
let age = 33;
let location = 'Berlin/Germany';
await page.evaluate(({name, age, location}) => {
console.log(name);
console.log(age);
console.log(location);
},{name, age, location});
评论
9赞
ggorlen
2/9/2021
我不清楚这是否比直接传递变量更方便或更可读，如下所示。这只会分配和分解对象，从而增加垃圾回收活动并添加更多大括号。这没什么大不了的，但也没有太大的改进，因为主要问题是 OP 根本没有传递参数。
4赞
Mehdi Raash
2/10/2021
不同意，在这种情况下，分配和销毁阵列是一件大事，但是VM对其进行了优化。这种样式的优点是你不关心变量插入的顺序。因此，您可以根据需要检索变量（属性）。
0赞
Mehdi Raash
2/10/2021
* 的对象没什么大不了的
2赞
ggorlen
2/10/2021
我没有想到重新排序，但这似乎是一个相当毫无意义的特征——在我看来，调用像 这样的函数不太直观。如果我真的想更改顺序，我只需在两个地方执行此操作，以便代码读取一致。同样，所有这些都是很小的，但这就是重点——答案让它看起来像是一个巨大的胜利，并没有真正解释你可以很容易地使用多个参数，或者最后一个参数是上下文参数被传递到回调中的地方，这是 OP 的基本问题。fn(({baz, foo, quux}) => ..., {foo, quux, baz})
59赞
Grant Miller
8/25/2018
#3
单变量：
您可以使用以下语法将一个变量传递给 page.evaluate（）：
await page.evaluate(example => { /* ... */ }, example);
注意：您不需要将变量括在 中，除非您要传递多个变量。
()
多个变量：
您可以使用以下语法将多个变量传递给 page.evaluate（）：
await page.evaluate((example_1, example_2) => { /* ... */ }, example_1, example_2);
注意：没有必要将变量括起来。
{}
9赞
wolf
9/5/2018
#4
对于传递 a ，有两种方法可以做到。function
// 1. Defined in evaluationContext
await page.evaluate(() => {
window.yourFunc = function() {...};
});
const links = await page.evaluate(() => {
const func = window.yourFunc;
func();
});
// 2. Transform function to serializable(string). (Function can not be serialized)
const yourFunc = function() {...};
const obj = {
func: yourFunc.toString()
};
const otherObj = {
foo: 'bar'
};
const links = await page.evaluate((obj, aObj) => {
const funStr = obj.func;
const func = new Function(`return ${funStr}.apply(null, arguments)`)
func();
const foo = aObj.foo; // bar, for object
window.foo = foo;
debugger;
}, obj, otherObj);
您可以添加到启动选项以进行测试devtools: true
评论
0赞
nanquim
10/26/2018
我想传递一个对象？
0赞
user3568719
10/31/2018
在第二种情况下，您将如何添加参数？例如，我想添加一个字符串，将字符串传递给 yourFunc
0赞
wolf
11/7/2018
如果您的属性不是函数，则可以替换为 object。@tramadayourFunc
0赞
wolf
11/7/2018
func 类似于 youFunc，因此你可以像 exec yourFunc 一样调用 func（stringArg） @user3568719
0赞
wuno
5/26/2019
你介意展示如何将对象传递到窗口然后访问它吗？
22赞
harrrrrrry
5/31/2019
#5
我花了很长时间才弄清楚 in 无法在节点控制台中显示。console.log()evaluate()
编号： https://github.com/GoogleChrome/puppeteer/issues/1944
在 Page.Evaluate 函数中运行的所有内容都是在浏览器页面的上下文中完成的。该脚本在浏览器中运行，而不是在 node.js 中运行，因此如果您登录，它将显示在浏览器控制台中，如果您运行无头，您将看不到。您也不能在函数中设置节点断点。
希望这能有所帮助。
评论
0赞
ggorlen
4/1/2023
如果添加监听器，则可以在 Node 控制台中显示浏览器日志。看这个。
4赞
Srinivas Reddy Thatiparthy
11/23/2019
#6
我有一个打字稿示例，可以帮助打字稿的新手。
const hyperlinks: string [] = await page.evaluate((url: string, regex: RegExp, querySelect: string) => {
.........
}, url, regex, querySelect);
评论
0赞
avalanche1
2/20/2020
你如何在打字稿中运行？每次修改代码时都会转译为 js 吗？puppeteer
0赞
Srinivas Reddy Thatiparthy
2/20/2020
是的。你可以在这里看看这个项目 - github.com/srinivasreddy/companies-list
1赞
Erwol
9/17/2020
您的回答帮助我弄清楚了如何将参数传递给： 。$evalpage.$eval(selector, (element, attribute) => element.getAttribute(attribute), attribute);
0赞
Azriz
9/9/2021
#7
版本与上面@wolf答案略有不同。使代码在不同上下文之间更具可重用性。
// util functions
export const pipe = (...fns) => initialVal => fns.reduce((acc, fn) => fn(acc), initialVal)
export const pluck = key => obj => obj[key] || null
export const map = fn => item => fn(item)
// these variables will be cast to string, look below at fn.toString()
const updatedAt = await page.evaluate(
([selector, util]) => {
let { pipe, map, pluck } = util
pipe = new Function(`return ${pipe}`)()
map = new Function(`return ${map}`)()
pluck = new Function(`return ${pluck}`)()
return pipe(
s => document.querySelector(s),
pluck('textContent'),
map(text => text.trim()),
map(date => Date.parse(date)),
map(timeStamp => Promise.resolve(timeStamp))
)(selector)
},
[
'#table-announcements tbody td:nth-child(2) .d-none',
{ pipe: pipe.toString(), map: map.toString(), pluck: pluck.toString() },
]
)
也不是说管道内部的功能不能使用这样的东西
// incorrect, which is i don't know why
pipe(document.querySelector)
// should be
pipe(s => document.querySelector(s))
评论