是否可以将数据从客户端（浏览器）发送到 puppeteer？

Question

我之前用 phantomjs 创建了一个服务器端渲染。

客户端

// when all client ajax request and page render finished
window.callPhantom('page.done')

// when page not found
window.callPhantom('page.fail')

服务器端

page.onCallback = function(status) {
  // when page render finished
  if(status == 'page.done') {
    // start render
  }

  // when page not found
  else {
    // response 404 page not found
  }
}

现在我想从 phantomjs 变成 chrome puppeteer。

如何在所有客户端 ajax 请求完成后将数据从客户端（浏览器）传递到服务器（puppeteer）（如 phantomjs callPhantom）。

是否可以使用 chrome 傀儡师来做到这一点？

Answer 1

使用page.evaluate(pageFunction, ...args)向页面传递数据。此示例将选择器字符串传递给页面以进行评估：

(async() => {
  const puppeteer = require('puppeteer')

  const browser = await puppeteer.launch()
  const page = await browser.newPage()

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

  await page.goto('https://google.com/')
  await page.evaluate(selector => {
    const el = document.querySelector(selector);
    console.log(el.src)
  }, 'img#hplogo');

  await browser.close()
})();

Answer 2

我遇到了和你一样的问题，这是我得到的解决方案：

您可以使用函数page.exposeFunction。

它会将一个函数绑定到页面 window，因此您只需在客户端评估该函数即可在 Node 端执行某些操作。

文档中有一个示例。

希望对您有所帮助

是否可以将数据从客户端（浏览器）发送到 puppeteer？

Is it possible to send data from client (browser) to puppeteer?

phantomjs

google-chrome-headless

puppeteer