17370845950

在 puppeteer 中，`page.evaluate()` 运行于浏览器上下文，与 node.js 环境完全隔离，因此无法直接访问外部变量；必须通过 `pagefunction` 的参数列表显式传入所需数据。

page.evaluate() 的核心设计原则是环境隔离：它在目标页面的 JavaScript 上下文中执行函数（即 Chromium 渲染进程），而你的 const value = "WHATEVER" 定义在 Node.js 主进程（Puppeteer 控制端），二者内存不共享、作用域不互通。这就是为什么在内联箭头函数中直接引用 val 会抛出 ReferenceError: val is not defined —— 浏览器端根本“看不见”这个变量。

✅ 正确做法是利用 page.evaluate() 的完整签名：

page.evaluate(pageFunction: (arg: Args) => T, ...args: Args): Promise

即：将待传值作为额外参数（...args）追加在函数之后，Puppeteer 会自动序列化并注入到页面上下文中。

以下是推荐写法（含类型安全提示）：

const value = "WHATEVER";

async function setValue(selector, val) {
  await page.evaluate(
    (sel, content) => {
      const el = document.querySelector(sel);
      if (el) el.innerHTML = content;
      else console.warn(`Element not found: ${sel}`);
    },
    selector,  // ← 第一个参数：selector 字符串
    val        // ← 第二个参数：要设置的内容
  );
}

await setValue("input#username", value);

? 关键要点：

• 参数数量不限，但所有 ...args 必须是可序列化的值（如字符串、数字、布尔值、普通对象、数组）；不可传函数、Promise、DOM 元素或

  

  undefined；
• 若需传复杂对象，建议先 JSON.stringify() + JSON.parse() 显式处理（尽管 Puppeteer 内部已做基础序列化，但避免嵌套函数或循环引用更稳妥）；
• 推荐为 page.evaluate() 内部逻辑添加存在性校验（如 if (el)），防止因元素未加载导致脚本崩溃；
• 如需返回值（例如获取更新后的 innerHTML），可在函数末尾 return，evaluate() 将以 Promise 形式解析该值。

? 进阶替代方案（按需选用）：

• 使用 page.$(selector) + element.evaluate() 实现更细粒度控制；
• 对高频操作可封装为自定义方法（如 page.setValueBySelector = (sel, val) => ...）；
• 若需频繁通信，考虑 page.exposeFunction() 暴露 Node.js 函数至页面（慎用，有安全与性能开销）。

总之，牢记口诀：“函数内不闭包，参数后面依次跟” —— 所有外部数据，必须走 ...args 显式传入。