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);
});

方法二：使用参数传递函数字符串

可以通过参数将函数作为字符串传递：

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

await page.evaluate((func) => {
    const documentHeight = eval(func);
    let pageHeight = documentHeight();
    console.log(pageHeight);
}, documentHeightFunc);

方法三：预先在页面上下文中定义函数

如果需要多次使用同一个函数，可以先在页面上下文中定义：

await page.evaluate(() => {
    window.documentHeight = function() {
        return Math.max(
            document.body.scrollHeight, 
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        );
    };
});

// 之后可以在其他evaluate中直接使用
await page.evaluate(() => {
    let pageHeight = window.documentHeight();
    console.log(pageHeight);
});

注意事项

1. 函数中使用的所有变量和API必须是页面上下文中可用的，例如document、window等
2. 不能使用Node.js特有的模块或API
3. 函数会被序列化为字符串传输，因此不能包含闭包或引用外部变量
4. 对于复杂的函数，建议使用TypeScript编写并确保其兼容浏览器环境

实际应用示例

计算页面高度是一个常见需求，以下是更完整的实现：

async function getPageHeight(page) {
    return await page.evaluate(() => {
        const getHeight = () => Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        );
        return getHeight();
    });
}

// 使用示例
const height = await getPageHeight(page);
console.log('页面高度:', height);

通过理解Puppeteer的执行上下文隔离机制，开发者可以更灵活地在页面上下文中注入和使用自定义函数，实现各种复杂的浏览器自动化操作。