¿Cómo usar evalOnNewDocument y exposeFunction? - javascript, titiritero

Recientemente, utilicé Puppeteer para un nuevo proyecto.

Tengo algunas preguntas sobre la parte de la API que no entiendo. La documentación es muy simple para estas introducciones de API:

1. page.exposeFunction
2. page.evaluateOnNewDocument

¿Puedo tener una demostración detallada para obtener una mejor comprensión?

Respuestas

Resumen:

La función titiritero page.exposeFunction() Básicamente, le permite acceder a la funcionalidad Node.js dentro del entorno de la página DOM.

Por otra parte, page.evaluateOnNewDocument() evalúa una función predefinida cuando se crea un nuevo documento y antes de que se ejecute cualquiera de sus scripts.

los Documentación titiritero para page.exposeFunction() estados:

page.exposeFunction (nombre, puppeteerFunction)

• name <cuerda> Nombre de la función en el objeto ventana
• puppeteerFunction <función> Función de devolución de llamada que se llamará en el contexto del titiritero.
• devuelve: <Promesa>

El método agrega una función llamada name en la pagina window objeto. Cuando se llama, la función se ejecuta puppeteerFunction en node.js y devuelve un Promesa que resuelve el valor de retorno de puppeteerFunction.

Si el puppeteerFunction devuelve un Promesa, será esperado.

NOTA Funciones instaladas vía page.exposeFunction Sobrevivir a las navegaciones.

Un ejemplo de añadir un md5 función en la página:

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

Un ejemplo de añadir un window.readfile función en la página:

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

Además, el Documentación titiritero para page.evaluateOnNewDocument explica:

page.evaluateOnNewDocument (pageFunction, ... args)

• pageFunction <función|cuerda> Función a evaluar en el contexto del navegador.
• ...args <...Serializable> Argumentos para pasar a pageFunction
• devuelve: <Promesa>

Agrega una función que se invocaría en uno de los siguientes escenarios:

• cada vez que se navega la página
• siempre que el marco hijo se adjunta o se navega. En este caso, la función se invoca en el contexto del nuevo marco adjunto.

La función se invoca después de que se creó el documento pero antes de que se ejecutara cualquiera de sus scripts. Esto es útil para modificar el entorno de JavaScript, por ejemplo. Plantar Math.random.

Un ejemplo de anulación de la propiedad navigator.languages ​​antes de que se cargue la página:

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