使用Puppeteer,是否可以监听浏览器历史记录API,如history.pushState、history.replaceState或history.popState,这些常用于单页应用程序框架路由器(如react-router)的后台,以便在视图之间导航?我不需要page.waitForNavigation(options),因为它不是真正意义上的导航,也不是一个侦听器。此外,我希望能够捕获传递给历史函数的参数,如data、title和url。
waitForNavigation
监听 History API 事件。例如:const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.google.com');
const [navResponse] = await Promise.all([
page.waitForNavigation(),
page.evaluate(() => { history.pushState(null, null, 'imghp') }),
])
console.log(navResponse) // null as per puppeteer docs
await browser.close();
await page.exposeFunction('onHashChange', url => page.emit('hashchange', url));
await page.evaluateOnNewDocument(() => {
addEventListener('hashchange', e => onHashChange(location.href));
});
// Listen for hashchange events in node Puppeteer code.
page.on('hashchange', url => console.log('hashchange event:', new URL(url).hash));
react-router
,page.waitForNavigation()
将会在_TimeoutError: Navigation Timeout Exceeded_中结束。 - user10531084
page.waitForNavigation(options)
来处理History API事件。 - Volodymyrreact-router
一起使用,这会引发超时错误... - user10531084