Puppeteer项目中如何将函数注入页面上下文

在Puppeteer自动化测试和网页抓取过程中，开发者经常需要在浏览器页面上下文中执行自定义JavaScript函数。然而，由于Node.js环境和浏览器环境的隔离性，直接在页面上下文中调用外部定义的函数会导致"function is not defined"错误。

问题本质

Puppeteer的page.evaluate()方法执行时，其内部的代码是在浏览器页面上下文中运行的，而不是在Node.js环境中。这意味着：

1. Node.js环境中定义的函数默认不可见
2. 两个环境之间的变量和函数不共享
3. 数据需要通过特定的序列化机制传递

解决方案

方法一：内联函数定义

最简单直接的方式是将函数定义直接包含在evaluate的代码字符串中：

await page.evaluate(() => {
    function documentHeight() {
        return Math.max(
            document.body.scrollHeight, 
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        )
    }
    let pageHeight = documentHeight()
    console.log(pageHeight)
})

方法二：预注入函数

如果需要在多个evaluate调用中复用同一个函数，可以先注入函数定义：

// 先注入函数定义
await page.evaluate(() => {
    window.documentHeight = function() {
        return Math.max(
            document.body.scrollHeight, 
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        )
    }
})

// 后续调用
await page.evaluate(() => {
    let pageHeight = documentHeight()
    console.log(pageHeight)
})

方法三：使用参数传递函数

Puppeteer允许通过参数传递函数定义：

const heightFunc = function() {
    return Math.max(
        document.body.scrollHeight, 
        document.body.offsetHeight,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight,
        document.documentElement.offsetHeight
    )
}

await page.evaluate(heightFunc => {
    let pageHeight = heightFunc()
    console.log(pageHeight)
}, heightFunc)

注意事项

1. 变量作用域：确保函数内使用的变量（如document）在页面上下文中可用
2. 序列化限制：传递的函数和参数必须能够被JSON序列化
3. 上下文隔离：页面上下文中的修改不会影响Node.js环境
4. 性能考虑：频繁注入大量函数可能影响性能，应考虑复用

最佳实践

对于复杂的页面操作，建议：

1. 将常用功能封装为独立的函数库
2. 通过脚本注入方式预先加载这些函数
3. 使用exposeFunctionAPI将Node.js函数暴露给页面
4. 考虑使用TypeScript确保类型安全

通过理解Puppeteer的执行环境和上下文隔离机制，开发者可以更高效地在页面上下文中执行自定义逻辑，实现强大的网页自动化功能。