NavigateEvent: метод intercept()

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

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

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

Метод intercept() интерфейса NavigateEvent перехватывает это навигационное событие, преобразуя его в навигацию по одному документу к адресу destination.

Синтаксис

intercept()
intercept(options)

Параметры

options Необязательно

Объект опций, содержащий следующие свойства:

handler Необязательно

Функция обратного вызова, определяющая поведение обработки навигации. Обычно она обрабатывает загрузку ресурсов и возвращает промис.

focusReset Необязательно

Определяет поведение фокуса при навигации. Может принимать одно из следующих значений:

after-transition: После того, как промис, возвращаемый функцией обратного вызова, будет выполнен, браузер сфокусирует первый элемент с атрибутом autofocus или элемент <body>, если ни один элемент не имеет установленного атрибута autofocus. Это значение по умолчанию.
manual: Отключить стандартное поведение.

scroll Необязательно

Определяет поведение прокрутки при навигации. Может принимать одно из следующих значений:

after-transition: Разрешить браузеру обрабатывать прокрутку, например, прокручивая до соответствующего фрагмента, если URL содержит фрагмент, или восстанавливая позицию прокрутки до предыдущего состояния при перезагрузке страницы или повторном посещении страницы из истории. Это значение по умолчанию.
manual: Отключить стандартное поведение.

Возвращаемое значение

Ничего (undefined).

Исключения

InvalidStateError DOMException: Выбрасывается, если текущий Document ещё не активен или если навигация была отменена.
SecurityError DOMException: Выбрасывается, если событие было вызвано методом dispatchEvent(), а не пользовательским агентом, или если навигацию нельзя перехватить (т.е. NavigateEvent.canIntercept имеет значение false).

Примеры

Обработка навигации с помощью `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);
      },
    });
  }
});

Использование `focusReset` и `scroll`

Подтверждение формы можно определить, обратившись к свойству NavigateEvent.formData. В следующем примере любая отправка формы превращается в навигацию, остающуюся на текущей странице. В этом случае вы не обновляете DOM, поэтому можете отменить любое стандартное поведение сброса и прокрутки, используя focusReset и scroll.

navigation.addEventListener("navigate", (event) => {
  if (event.formData && event.canIntercept) {
    // User submitted a POST form to a same-domain URL
    // (If canIntercept is false, the event is just informative:
    // you can't intercept this request, although you could
    // likely still call .preventDefault() to stop it completely).

    event.intercept({
      // Since we don't update the DOM in this navigation,
      // don't allow focus or scrolling to reset:
      focusReset: "manual",
      scroll: "manual",
      async handler() {
        await fetch(event.destination.url, {
          method: "POST",
          body: event.formData,
        });
        // You could navigate again with {history: 'replace'} to change the URL here,
        // which might indicate "done"
      },
    });
  }
});

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

Спецификация
HTML # dom-navigateevent-intercept-dev

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`intercept`	105102–108	105102–108	Нет	9188–94	Нет	105102–108	Нет	7270–73	Нет	20.019.0–21.0	105102–108

См. также

Современное клиентское маршрутизирование: 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/NavigateEvent/intercept