问题描述
我想使用Puppeteer来响应页面更新.页面显示项目,当我离开页面时,随着时间的流逝,可能会出现新的项目.例如.每10秒就会添加一个新项目.
I want to use Puppeteer to respond to page updates.The page shows items and when I leave the page open new items can appear over time.E.g. every 10 seconds a new item is added.
我可以使用以下内容在页面的初始加载上等待一个项目:
I can use the following to wait for an item on the initial load of the page:
await page.waitFor(".item");
console.log("the initial items have been loaded")
我如何等待/接获将来的物品?我想实现这样的东西(伪代码):
How can I wait for / catch future items?I would like to achieve something like this (pseudo code):
await page.goto('http://mysite');
await page.waitFor(".item");
// check items (=these initial items)
// event when receiving new items:
// check item(s) (= the additional [or all] items)
推荐答案
您可以使用 exposeFunction 公开本地函数:
You can use exposeFunction to expose a local function:
await page.exposeFunction('getItem', function(a) {
console.log(a);
});
然后,您可以使用 page.evaluate 创建一个观察者并侦听创建的新节点在父节点中.
Then you can use page.evaluate to create an observer and listen to new nodes created inside a parent node.
此示例抓取(只是一个想法,而不是最后的工作) Stack Overflow中的python聊天,并打印在该聊天中创建的新项目.
This example scrapes (it's just an idea, not a final work) the python chat in Stack Overflow, and prints new items being created in that chat.
var baseurl = 'https://chat.stackoverflow.com/rooms/6/python';
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto(baseurl);
await page.exposeFunction('getItem', function(a) {
console.log(a);
});
await page.evaluate(() => {
var observer = new MutationObserver((mutations) => {
for(var mutation of mutations) {
if(mutation.addedNodes.length) {
getItem(mutation.addedNodes[0].innerText);
}
}
});
observer.observe(document.getElementById("chat"), { attributes: false, childList: true, subtree: true });
});
这篇关于操纵up等待页面/DOM更新-响应在初始加载后添加的新项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!