本文介绍了木偶师:如何监听对象事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
可以监听页内对象调度的事件吗?假设我转到的页面中有以下代码:
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中有一个更复杂的示例。
这篇关于木偶师:如何监听对象事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!