如何在 Puppeteers .evaluate() 方法中传递函数？

Question

每当我尝试传递一个函数时，像这样：

var myFunc = function() { console.log("lol"); };

await page.evaluate(func => {
 func();
 return true;
}, myFunc);

我明白了：

(node:13108) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Evaluation failed: TypeError: func is not a function
at func (<anonymous>:9:9)
(node:13108) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

为什么？如何正确操作？

谢谢！

€：让我澄清一下：我这样做是因为我想先找到一些 DOM 元素并在该函数中使用它们，更像这样（简化）：

var myFunc = function(element) { element.innerHTML = "baz" };

await page.evaluate(func => {
  var foo = document.querySelector('.bar');
  func(foo);
  return true;
}, myFunc);

Answer 1

您不能将函数直接传递给page.evaluate()，但您可以调用另一个特殊方法（page.exposeFunction），它将您的函数公开为全局函数（也可作为页面window 对象的属性使用） ，所以当你在page.evaluate()里面时可以调用它：

var myFunc = function() { console.log("lol"); };
await page.exposeFunction("myFunc", myFunc);

await page.evaluate(async () => {
   await myFunc();
   return true;
});

请记住page.exposeFunction() 将使您的函数返回一个Promise，然后，您需要使用async 和await。发生这种情况是因为您的函数不是running inside your browser，而是在您的nodejs 应用程序中。

1. exposeFunction() does not work after goto()
2. Why can't I access 'window' in an exposeFunction() function with Puppeteer?
3. How to use evaluateOnNewDocument and exposeFunction?
4. exposeFunction remains in memory?
5. Puppeteer: pass variable in .evaluate()
6. Puppeteer evaluate function
7. allow to pass a parameterized funciton as a string to page.evaluate
8. Functions bound with page.exposeFunction() produce unhandled promise rejections
9. exposed function queryseldtcor not working in puppeteer
10. How can I dynamically inject functions to evaluate using Puppeteer?

Answer 2

木偶师issue讨论了类似的问题。

有几种方法可以解决您的问题。第一条规则是保持简单。

评估函数

这是最快的处理方式，你只需传递函数并执行它。

await page.evaluate(() => {
  var myFunc = function(element) { element.innerHTML = "baz" };
  var foo = document.querySelector('.bar');
  myFunc(foo);
  return true;
});

预先暴露函数

您可以使用 page.evaluate 或 page.addScriptTag 预先公开该函数

// add it manually and expose to window
await page.evaluate(() => {
  window.myFunc = function(element) { element.innerHTML = "baz" };
});

// add some scripts
await page.addScriptTag({path: "myFunc.js"});

// Now I can evaluate as many times as I want
await page.evaluate(() => {
  var foo = document.querySelector('.bar');
  myFunc(foo);
  return true;
});

使用元素句柄

page.$(选择器)

您可以将元素句柄传递给 .evaluate 并根据需要进行更改。

const bodyHandle = await page.$('body');
const html = await page.evaluate(body => body.innerHTML, bodyHandle);

page.$eval

您可以定位一个元素并根据需要进行更改。

const html = await page.$eval('.awesomeSelector', e => {
e.outerHTML = "whatever"
});

诀窍是read the docs 并保持简单。

Answer 3

带参数的传递函数

// 手动添加并暴露到窗口

 await page.evaluate(() => {
      window.myFunc = function(element) { element.innerHTML = "baz" };
    });

//然后调用上面声明的函数

 await page.evaluate((param) => {
         myFunc (param);
    }, param);

Answer 4

抛出错误是因为你执行了func(); 但func 不是一个函数。我更新我的答案以回答您更新的问题：

选项 1：在页面上下文中执行您的函数：

var myFunc = function(element) { element.innerHTML = "baz" };
await page.evaluate(func => {
  var foo = document.querySelector('.bar');
  myFunc(foo);
  return true;
});

选项 2：将元素句柄作为参数传递

const myFunc = (element) => { 
    innerHTML = "baz";
    return true;
}
const barHandle = await page.$('.bar');
const result = await page.evaluate(myFunc, barHandle);
await barHandle.dispose();

`

Answer 5

//  External function to run inside evaluate context
function getData() {
        return document.querySelector('title').textContent;
    }

function mainFunction(url, extractFunction){
    let browser = await puppeteer.launch({});
    let page = await browser.newPage();

    await page.goto(url);

    let externalFunction = Object.assign(extractFunction);

    let res = await this.page.evaluate(externalFunction)

    console.log(res);
}
    

// call it here
mainFunction('www.google.com',getData);

Answer 6

创建了一个包裹page.evaluate的辅助函数：

const evaluate = (page, ...params) => browserFn => {
    const fnIndexes = [];
    params = params.map((param, i) => {
        if (typeof param === "function") {
            fnIndexes.push(i);
            return param.toString();
        }
        return param;
    });
    return page.evaluate(
        (fnIndexes, browserFnStr, ...params) => {
            for (let i = 0; i < fnIndexes.length; i++) {
                params[fnIndexes[i]] = new Function(
                    " return (" + params[fnIndexes[i]] + ").apply(null, arguments)"
                );
            }
            browserFn = new Function(
                " return (" + browserFnStr + ").apply(null, arguments)"
            );
            return browserFn(...params);
        },
        fnIndexes,
        browserFn.toString(),
        ...params
    );
};

export default evaluate;

获取所有参数并将函数转换为字符串。
然后在浏览器上下文中重新创建函数。
见https://github.com/puppeteer/puppeteer/issues/1474

你可以像这样使用这个函数：

const featuredItems = await evaluate(page, _getTile, selector)((get, s) => {
    const items = Array.from(document.querySelectorAll(s));
    return items.map(node => get(node));
});

Answer 7

function stringifyWithFunc(obj) {
  const str = JSON.stringify(obj, function(key, val) {
      if (typeof val === "function") {
        return val + "";
        return val;
      });
    return str;
  }

  function parseWithFunction(str) {
    const obj = JSON.parse(str, function(key, val) {
      if (typeof val === 'string' && val.includes("function")) {
        return eval(`(${val})`);
      }
      return val;
    });
    return obj;
  }

  function testFunc() {
    console.log(123);
  };

  const params = {
    testFunc,
    a: 1,
    b: null
  }

  await page.exposeFunction("parseWithFunction", parseWithFunction);

  await pageFrame.$eval(".category-content", (elem, objStr) => {
      const params = parseWithFunction(objStr);
      params.testFunc()
    },
    stringifyWithFunc(params)
  );