Как слушать history.pushstate с Кукольником?

1

Используя Puppeteer, можно ли выслушать API истории браузера, например history.pushState, history.replaceState или history.popState, часто используемый под капотом маршрутизаторами рамок одностраничных приложений, например, react-router, для перехода назад и четвертого Просмотры?
Я не ищу page.waitForNavigation(options), так как он не перемещается в прямом смысле этого слова и не является слушателем.
Более того, я хотел бы иметь возможность захватить аргументы, переданные в функции истории, такие как data, title и url.

  • 0
    В FAQ Puppeteer сказано следующее: From Puppeteer's standpoint, “navigation” is anything that changes a page's URL. Aside from regular navigation where the browser hits the network to fetch a new document from the web server, this includes anchor navigations and History API usage. Таким образом, вы должны иметь возможность использовать page.waitForNavigation(options) для событий History API также
  • 0
    Не работает с react-router , это выдает ошибку тайм-аута ...
Теги:
ecmascript-6
puppeteer

1 ответ

1

Вы можете использовать waitForNavigation для прослушивания событий 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();

Согласно документации, ответ на навигацию является нулевым. "В случае навигации к другому якорю или навигации из-за использования API истории, навигация будет разрешаться с нулевым значением".

Если вы используете хеш-навигацию, вы можете создать прослушиватель событий, когда маршрут изменится, как указано в примерах кукловода.

  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));
  • 0
    При react-router page.waitForNavigation() просто завершится в TimeoutError: Превышено время ожидания навигации
  • 1
    Я думал, что это было решено в github.com/GoogleChrome/puppeteer/commit/… - я обновил свой ответ, чтобы включить, как слушать изменения навигации по хешу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню