NavigateEvent

Интерфейс NavigateEvent API навигации — это объект события для события navigate, которое срабатывает при инициировании навигации любого типа (включая использование функций History API, таких как History.go()). NavigateEvent предоставляет доступ к информации об этой навигации и позволяет разработчикам перехватывать и контролировать обработку навигации.

NavigateEvent() Экспериментально

Создает новый экземпляр объекта NavigateEvent.

Наследует свойства от родительского класса Event.

canIntercept Только для чтения Экспериментально

Возвращает true , если навигацию можно перехватить, или false в противном случае (например, вы не можете перехватить навигацию по другому домену).

destination Только для чтения Экспериментально

Возвращает объект NavigationDestination, представляющий конечную точку навигации.

downloadRequest Только для чтения Экспериментально

Возвращает имя файла, запрашиваемого для скачивания, в случае навигации для скачивания (например, элемент <a> или <area> с атрибутом download), или null в противном случае.

formData Только для чтения Экспериментально

Возвращает объект FormData, представляющий отправленные данные в случае отправки формы POST, или null в противном случае.

hashChange Только для чтения Экспериментально

Возвращает true если навигация — это навигация по фрагменту (т.е. к идентификатору фрагмента в том же документе), или false в противном случае.

hasUAVisualTransition Только для чтения Экспериментально

Возвращает true , если пользовательский агент выполнил визуальный переход для этой навигации до отправки этого события, или false в противном случае.

info Только для чтения Экспериментально

Возвращает значение данных info , переданные операцией инициации навигации (например, Navigation.back() или Navigation.navigate()), или undefined , если данные info не были переданы.

navigationType Только для чтения Экспериментально

Возвращает тип навигации — push, reload, replace, или traverse.

signal Только для чтения Экспериментально

Возвращает AbortSignal, который будет прерван, если навигация отменена (например, пользователем, нажатием кнопки "Стоп" браузера или началом другой навигации, которая отменяет текущую).

userInitiated Только для чтения Экспериментально

Возвращает true , если навигация была инициирована пользователем (например, нажатием ссылки, отправкой формы или нажатием кнопок "Назад" / "Вперед" браузера), или false в противном случае.

Наследует методы от родительского класса Event.

intercept() Экспериментально

Перехватывает эту навигацию, преобразуя её в навигацию по документу к URL destination. Может принимать функцию-обработчик, которая определяет желаемое поведение обработки навигации, а также параметры focusReset и scroll для управления поведением по своему усмотрению.

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

• Современный маршрутизация на стороне клиента: API навигации
• Пояснения к API навигации
• Демонстрация API навигации от Domenic Denicola здесь