调用page.evaluate报ReferenceError: isURLImageAccessible未定义如何解决

问题原因 #

Puppeteer的page.evaluate()方法的回调函数是在目标页面的浏览器上下文环境中执行，和你的Node.js运行上下文完全隔离。你在Node.js侧定义的isURLImageAccessible函数没有被注入到浏览器环境，所以浏览器执行evaluate里的代码时会找不到这个函数，抛出引用错误。

修复方案 #

你可以根据自己的业务逻辑选择以下任意一种方案：

• 方案1：把isURLImageAccessible的逻辑移到page.evaluate内部
  直接把函数定义写在evaluate的回调里，让浏览器环境能直接读取到：

export const getImage = async (page, url) => {
  const img = await page.evaluate(async () => {
    // 把isURLImageAccessible定义移到浏览器执行上下文内
    const isURLImageAccessible = async (url) => {
      // 原isURLImageAccessible的代码逻辑
    };

    const ogImgEl = document.querySelector("meta[property='og:image']");
    const ogImg = ogImgEl?.getAttribute("content");
    if (ogImg != null && (await isURLImageAccessible(ogImg))) {
      return ogImg;
    }

    // 其余原有逻辑
  });
  // 剩余代码
};

• 方案2：通过page.exposeFunction把Node侧的函数注入到浏览器环境
  提前把isURLImageAccessible暴露给浏览器上下文，之后evaluate里就能直接调用，注意这个方案下函数实际还是在Node侧执行，适合isURLImageAccessible只用到Node API的场景：

export const getImage = async (page, url) => {
  // 先把Node侧的isURLImageAccessible注册为浏览器环境的window.isURLImageAccessible
  await page.exposeFunction('isURLImageAccessible', isURLImageAccessible);

  const img = await page.evaluate(async () => {
    const ogImgEl = document.querySelector("meta[property='og:image']");
    const ogImg = ogImgEl?.getAttribute("content");
    if (ogImg != null && (await window.isURLImageAccessible(ogImg))) {
      return ogImg;
    }

    // 其余原有逻辑
  });
  // 剩余代码
};

• 方案3：把图片可访问性校验逻辑移到evaluate外面执行
  先在evaluate里只返回拿到的og:image地址，回到Node上下文再做校验，逻辑拆分最清晰，没有环境隔离问题，不需要依赖浏览器API的场景优先选择：

export const getImage = async (page, url) => {
  // 浏览器侧仅执行获取og图片地址的逻辑
  const ogImg = await page.evaluate(async () => {
    const ogImgEl = document.querySelector("meta[property='og:image']");
    return ogImgEl?.getAttribute("content");
  });

  // 回到Node上下文再做可访问性校验
  if (ogImg != null && await isURLImageAccessible(ogImg)) {
    return ogImg;
  }

  // 其余原有逻辑
};

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