Puppeteer 是一个 Node.js 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。$$eval
是 Puppeteer 中的一个方法,用于在页面上下文中执行 JavaScript 代码,并返回结果。
$$eval
方法接受两个参数:
当你需要在页面上对一组元素执行相同的操作时,可以使用 $$eval
。例如,批量修改元素的属性或内容。
以下是一个使用 Puppeteer 和 $$eval
运行嵌套 for 循环的示例:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// 假设页面上有一组元素,我们想要对它们进行操作
const elements = await page.$$eval('.item', items => {
// 嵌套 for 循环示例
for (let i = 0; i < items.length; i++) {
for (let j = 0; j < items[i].children.length; j++) {
// 对每个子元素执行操作,例如修改文本内容
items[i].children[j].textContent = `Item ${i} - Subitem ${j}`;
}
}
return items;
});
console.log(elements);
await browser.close();
})();
$$eval
执行时页面没有正确渲染原因:可能是页面加载不完全或者 JavaScript 代码执行时机不对。
解决方法:
$$eval
,可以使用 page.waitForSelector
等待特定元素出现。page.waitForFunction
等待某个条件满足后再执行代码。await page.waitForSelector('.item');
const elements = await page.$$eval('.item', items => {
// 你的代码
});
$$eval
执行时出现安全错误原因:$$eval
中的代码可能会访问或修改页面上的敏感数据,导致安全问题。
解决方法:
$$eval
中执行复杂的逻辑,尽量保持代码简单。page.evaluate
代替 $$eval
,并传递必要的参数,减少对页面上下文的访问。const elements = await page.evaluate((selector) => {
const items = Array.from(document.querySelectorAll(selector));
for (let i = 0; i < items.length; i++) {
for (let j = 0; j < items[i].children.length; j++) {
items[i].children[j].textContent = `Item ${i} - Subitem ${j}`;
}
}
return items;
}, '.item');
领取专属 10元无门槛券
手把手带您无忧上云