Навигация: событие navigate

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Экспериментально: Это экспериментальная технология .
Перед использованием в рабочей среде внимательно изучите таблицу совместимости браузеров.

Событие navigate интерфейса Navigation срабатывает при инициировании любого типа навигации, позволяя вам при необходимости перехватывать ее.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

addEventListener("navigate", (event) => {});

onnavigate = (event) => {};

Тип события

Объект NavigateEvent. Наследуется от Event.

Примеры

Обработка навигации с использованием `intercept()`

navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

Примечание: До появления API навигации для выполнения подобных действий приходилось прослушивать все события кликов по ссылкам, выполнять event.preventDefault(), выполнять соответствующий вызов History.pushState() и затем настраивать отображение страницы на основе нового URL. При этом не обрабатывались все навигации — только инициированные пользователем клики по ссылкам.

Обработка прокрутки с использованием `scroll()`

В этом примере перехвата навигации функция handler() начинает с загрузки и рендеринга содержимого статьи, а затем загружает и рендерит дополнительное содержимое. Логично прокрутить страницу к основному содержанию статьи сразу после его доступности, чтобы пользователь мог с ним взаимодействовать, а не ждать, пока будет рендерировано дополнительное содержимое. Для этого мы добавили вызов scroll() между этими операциями.

navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(navigateEvent)) {
    return;
  }
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);

        event.scroll();

        const secondaryContent = await getSecondaryContent(url.pathname);
        addSecondaryContent(secondaryContent);
      },
    });
  }
});

Спецификации

Спецификация
HTML # event-navigate

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`navigate_event`	102	102	Нет	88	Нет	102	Нет	70	Нет	19.0	102

См. также

Современное маршрутизирование на стороне клиента: API навигации
Объяснение API навигации
Демонстрация API навигации Domenic Denicola

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Navigation/navigate_event