如何在浏览器上下文中执行 Node.js 代码？

【问题标题】：How to execute Node.js code in the browser context?如何在浏览器上下文中执行 Node.js 代码？
【发布时间】：2018-11-25 01:12:30
【问题描述】：

如何在 page.evaluate() 语句中执行客户端 JS 代码（不仅仅是浏览器 JavaScript 代码，Node.js 代码）？

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await page.evaluate(() => {
    document.querySelector('button[type=submit]').click();
  });
  console.log('yes') 
  await browser.close();
})();

【问题讨论】：

但是你不是已经这样做了吗？ document.querySelector('button[type=submit]').click();应该在浏览器上下文中执行
或者你的意思是在浏览器关闭之前点击不会发生？究竟是什么不工作？

标签： javascript node.js google-chrome-devtools puppeteer headless-browser

【解决方案1】：

传递给page.evaluate() 的第一个参数应该是一个函数，它将在浏览器的页面上下文中进行评估。

Node.js 是服务器端代码，旨在在服务器上执行。

您可以使用以下方法将参数从 Node.js 环境传递给页面函数：

// Node.js Environment
const hello_world = 'Hello, world! (from Node.js)';

await page.evaluate(hello_world => {
  // Browser Page Environment
  console.log(hello_world);
}, hello_world);

您可以在页面上下文中侦听'console' 事件并使用page.on() 打印结果：

page.on('console', msg => {
  for (let i = 0; i < msg.args().length; i++) {
    console.log(`${i}: ${msg.args()[i]}`);
  }
});

【讨论】：