Question

使用Puppeteer，可以收听history.pushState，history.replaceState或history.popState之类的浏览器历史记录API，这些API通常在单页应用程序框架路由器（例如{ {1}}，以便在视图之间来回浏览？
我不是要寻找react-router，因为它并不是真正意义上的字面意义上的导航，也不是听众。
而且，我希望能够捕获传递给历史函数（例如page.waitForNavigation(options)，data和title等参数的参数。

Answer 1

您可以使用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();

根据documentation，导航响应为null。 “如果使用History API导航到其他锚点或导航，则导航将以null解析。”

如果您使用的是哈希导航，则可以为puppeteer-examples中指定的路线更改创建事件侦听器。

  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));

如何用Puppeteer收听history.pushstate？

1 个答案: