如何从浏览器客户端向Puppeteer传递数据？附PhantomJS旧实现参考

当然可以实现！Puppeteer提供了标准且灵活的方式来完成客户端与服务端的通信，替代PhantomJS里的window.callPhantom，核心是利用浏览器原生的window.postMessage API，配合Puppeteer的页面消息监听事件。

下面是对应你原来PhantomJS实现的Puppeteer版本代码：

客户端代码 #

把原来的window.callPhantom替换成window.postMessage即可，这是浏览器标准API，兼容性更好：

// 当所有客户端Ajax请求及页面渲染完成时
window.postMessage('page.done');
// 当页面未找到时
window.postMessage('page.fail');

服务端（Puppeteer）代码 #

通过监听页面的message事件来接收客户端发送的消息，处理逻辑和你之前的PhantomJS代码类似：

// 监听页面发送的消息
page.on('message', async (message) => {
  const status = await message.text(); // 获取消息文本内容
  if (status === 'page.done') {
    // 页面渲染完成，执行你的渲染逻辑
    console.log('页面已就绪，开始处理渲染');
    // 示例：生成截图或导出HTML
    // await page.screenshot({ path: 'completed-page.png' });
  } else if (status === 'page.fail') {
    // 页面未找到，返回404响应
    console.log('页面不存在，返回404状态');
    // 结合你的HTTP服务返回404，比如：
    // response.writeHead(404, { 'Content-Type': 'text/html' });
    // response.end('<h1>404 Page Not Found</h1>');
  }
});

传递复杂数据 #

如果需要传递更复杂的结构化数据（比如对象），可以直接发送JSON格式的内容：

客户端代码 #

window.postMessage({
  type: 'page.done',
  details: {
    loadedResources: 24,
    renderDuration: 800
  }
});

服务端代码 #

使用message.json()来解析JSON数据：

page.on('message', async (message) => {
  const payload = await message.json();
  if (payload.type === 'page.done') {
    console.log(`页面渲染完成，加载了${payload.details.loadedResources}个资源，耗时${payload.details.renderDuration}ms`);
    // 执行后续逻辑
  }
});

注意事项 #

• 确保客户端代码执行时，Puppeteer已经完成了页面的基本加载，你可以配合page.waitForFunction来等待客户端的特定状态，比如：

  await page.goto('your-page-url');
  // 等待客户端标记渲染完成
  await page.waitForFunction(() => window.renderCompleted === true);
  

• 消息传递是异步的，所以在处理时要注意使用async/await来获取消息内容。

内容的提问来源于stack exchange，提问作者Ciao