如何用Puppeteer替代PhantomJS的onInitialized实现页面加载前执行代码？

我之前也被这个问题卡过一阵，终于找到完美的解决方案了！Puppeteer里其实有个专门的方法干这个——page.evaluateOnNewDocument()，它完全对应PhantomJS的onInitialized场景：在页面文档创建后、任何页面脚本执行前注入你的全局变量，既不会被页面跳转重置，时机也刚好够早。

为什么其他方法不行？ #

• 你说的创建页面后跳转前调用evaluate()：这时候设置的变量是在当前空页面的环境里，一旦goto跳转，新页面的执行环境会完全重置，之前的变量自然就没了。
• 在domcontentloaded里执行：确实太晚了，页面初始化时的脚本（比如head里的立即执行脚本）已经跑完了，根本拿不到你后来设置的变量。

正确的实现方式 #

直接用evaluateOnNewDocument()，它会在每次页面导航（包括首次加载）的最早期阶段执行，相当于给页面打了个“初始化补丁”。下面是完整的代码示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 核心代码：在页面初始化时注入全局变量
  await page.evaluateOnNewDocument(() => {
    // 这里设置的变量会在页面加载时直接可用
    window.myAppGlobal = {
      apiKey: 'your-secret-key',
      appMode: 'test'
    };
    window.isFromPuppeteer = true;
  });

  // 现在跳转页面，页面内的脚本可以直接访问上面的全局变量
  await page.goto('https://your-target-page.com');

  // 验证一下变量是否生效
  const globalValue = await page.evaluate(() => window.myAppGlobal.apiKey);
  console.log('全局变量值:', globalValue); // 输出: your-secret-key

  await browser.close();
})();

额外说明 #

• 这个方法不仅在首次加载时生效，页面刷新、跳转新页面时也会自动执行，如果你需要在所有打开的页面都注入全局变量，这个特性非常实用。
• 如果你只想在首次加载时注入，其实也不需要额外处理，因为首次goto前已经执行了，后续如果不需要可以调用page.removeScriptToEvaluateOnNewDocument()移除。

内容的提问来源于stack exchange，提问作者DShook