木偶师：如何监听对象事件

问题描述

可以监听页内对象调度的事件吗？假设我转到的页面中有以下代码：

var event = new CustomEvent('status', { detail: 'ok' });
window.addEventListener('status', function(e) {
  console.log('status: ', e.detail);
});
setInterval(window.dispatchEvent, 1000, event);

我希望能够监听由Window对象(或任何其他JS对象)分派的事件。如何在木偶中执行此操作？

推荐答案

首先，您必须公开一个可以从页面内部调用的函数。其次，侦听事件并调用公开的函数并传递事件数据。

// Expose a handler to the page
await page.exposeFunction('onCustomEvent', ({ type, detail }) => {
    console.log(`Event fired: ${type}, detail: ${detail}`);
});

// listen for events of type 'status' and
// pass 'type' and 'detail' attributes to our exposed function
await page.evaluateOnNewDocument(() => {
    window.addEventListener('status', ({ type, detail }) => {
        window.onCustomEvent({ type, detail });
    });
});

await page.goto(/* ... */);

如果页面中现在激发了status事件(如您提供的代码)，您将看到它记录在Node.js应用程序的控制台中。

如评论中所述，puppeteer examples中有一个更复杂的示例。