如何使用evaluateOnNewDocument 和exposeFunction?

本文介绍了如何使用evaluateOnNewDocument 和exposeFunction?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

最近，我在一个新项目中使用了 Puppeteer.

Recently, I used Puppeteer for a new project.

我有一些关于 API 部分我不明白的问题.这些 API 介绍的文档非常简单:

I have a few questions about thea part of the API I don't understand. The documentation is very simple for these API introductions:

page.exposeFunction
page.evaluateOnNewDocument

我可以做一个详细的演示以便更好地理解吗?

总结:

Puppeteer 函数 page.exposeFunction() 本质上允许您在页面 DOM 环境中访问 Node.js 功能.

Summary:

The Puppeteer function page.exposeFunction() essentially allows you to access Node.js functionality within the Page DOM Environment.

另一方面，page.evaluateOnNewDocument() 在创建新文档时和执行其任何脚本之前评估预定义的函数.

On the other hand, page.evaluateOnNewDocument() evaluates a predefined function when a new document is created and before any of its scripts are executed.

页面的 Puppeteer 文档.ExposureFunction() 状态:

name <string>窗口对象上的函数名称
puppeteerFunction <功能>将在 Puppeteer 的上下文中调用的回调函数.
返回:<Promise>

该方法在页面的window 对象上添加了一个名为name 的函数.调用时，该函数在 node.js 中执行 puppeteerFunction 并返回一个 Promise 解析为 puppeteerFunction 的返回值.

The method adds a function called name on the page's window object. When called, the function executes puppeteerFunction in node.js and returns a Promise which resolves to the return value of puppeteerFunction.

如果 puppeteerFunction 返回一个承诺，它将被等待.

If the puppeteerFunction returns a Promise, it will be awaited.

注意通过 page.exposeFunction 安装的函数在导航中存活.

在页面中添加md5函数的例子:

An example of adding an md5 function into the page:

const puppeteer = require('puppeteer');
const crypto = require('crypto');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', msg => console.log(msg.text()));
  await page.exposeFunction('md5', text =>
    crypto.createHash('md5').update(text).digest('hex')
  );
  await page.evaluate(async () => {
    // use window.md5 to compute hashes
    const myString = 'PUPPETEER';
    const myHash = await window.md5(myString);
    console.log(`md5 of ${myString} is ${myHash}`);
  });
  await browser.close();
});

在页面中添加window.readfile函数的例子:

An example of adding a window.readfile function into the page:

const puppeteer = require('puppeteer');
const fs = require('fs');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', msg => console.log(msg.text()));
  await page.exposeFunction('readfile', async filePath => {
    return new Promise((resolve, reject) => {
      fs.readFile(filePath, 'utf8', (err, text) => {
        if (err)
          reject(err);
        else
          resolve(text);
      });
    });
  });
  await page.evaluate(async () => {
    // use window.readfile to read contents of a file
    const content = await window.readfile('/etc/hosts');
    console.log(content);
  });
  await browser.close();
});

此外， 的 Puppeteer 文档page.evaluateOnNewDocument 解释:

pageFunction function|string>要在浏览器上下文中评估的函数
...args <...可序列化>传递给 pageFunction
返回:<Promise>

添加将在以下场景之一中调用的函数:

Adds a function which would be invoked in one of the following scenarios:

每当浏览页面时
每当附加或导航子框架时.在这种情况下，该函数是在新附加的框架的上下文中调用的

在创建文档之后但在运行其任何脚本之前调用该函数.这对于修改 JavaScript 环境很有用，例如种子Math.random.

The function is invoked after the document was created but before any of its scripts were run. This is useful to amend the JavaScript environment, e.g. to seed Math.random.

在页面加载之前覆盖 navigator.languages 属性的示例:

An example of overriding the navigator.languages property before the page loads:

// preload.js

// overwrite the `languages` property to use a custom getter
Object.defineProperty(navigator, "languages", {
  get: function() {
    return ["en-US", "en", "bn"];
  }
});

// In your puppeteer script, assuming the preload.js file is in same folder of our script
const preloadFile = fs.readFileSync('./preload.js', 'utf8');
await page.evaluateOnNewDocument(preloadFile);

这篇关于如何使用evaluateOnNewDocument 和exposeFunction?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

the