如何在Puppeteer中监听postMessage消息并获取事件数据？

我懂你的需求——用Puppeteer启动页面后，想把页面里postMessage的事件数据拿到外部代码里处理对吧？其实有两种实用的方案，我给你详细拆解下：

方法一：用page.exposeFunction暴露外部回调（推荐） #

这个方式最直接，相当于给页面注入一个能调用外部代码的函数，页面触发postMessage时，直接把数据传给这个函数就行。

示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 把外部的handleMessage函数暴露给页面，页面里可直接调用window.handleMessage
  await page.exposeFunction('handleMessage', async (data) => {
    console.log('从页面拿到的postMessage数据：', data);
    // 这里可以写你的自定义逻辑，比如存入数据库、做数据校验等
  });

  // 在页面中注入监听postMessage的代码
  await page.evaluate(() => {
    window.addEventListener('message', (event) => {
      // 收到postMessage后，调用暴露的外部函数传递数据
      window.handleMessage(event.data);
    });

    // 模拟页面发送postMessage（实际场景可能是页面自身触发）
    window.postMessage({ type: 'test', content: '这是测试数据' }, '*');
  });

  await browser.close();
})();

方法二：通过console事件捕获数据 #

如果不想暴露外部函数，也可以让页面把postMessage的数据用console.log输出，再由外部监听page.on('console')事件来获取。

示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 监听页面的console事件
  page.on('console', (msg) => {
    if (msg.type() === 'log') {
      const args = msg.args();
      // 取出console.log的第一个参数（即postMessage的数据）
      args[0].jsonValue().then((data) => {
        console.log('从页面console拿到的postMessage数据：', data);
      });
    }
  });

  // 在页面中注入监听postMessage并打印数据的代码
  await page.evaluate(() => {
    window.addEventListener('message', (event) => {
      console.log(event.data);
    });

    // 模拟发送postMessage
    window.postMessage({ type: 'anotherTest', content: '这是另一种方式的数据' }, '*');
  });

  await browser.close();
})();

注意事项 #

• 用page.exposeFunction时，传递的数据必须是可序列化的（比如不能直接传DOM对象），因为数据需要在Node.js和浏览器上下文之间跨环境传递。
• 如果页面的postMessage是跨域触发的，要确保页面的CORS配置允许相关操作，否则可能监听不到事件。

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