Интерфейс Navigation API навигации позволяет управлять всеми действиями навигации для текущего window в одном централизованном месте, включая инициирование навигации программно, просмотр записей истории навигации и управление навигацией по мере ее выполнения.

Доступ к нему осуществляется через свойство Window.navigation.

API навигации отображает только записи истории, созданные в текущем контексте просмотра, которые имеют тот же источник, что и текущая страница (например, не навигации внутри встроенных <iframe> или навигации с другим источником), предоставляя точный список всех предыдущих записей истории только для вашего приложения. Это делает навигацию по истории гораздо менее хрупкой по сравнению со старым API истории.

Свойства экземпляра

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

activation Только для чтения Экспериментально: Возвращает объект NavigationActivation содержащий информацию о последней навигации между документами, которая "активировала" этот документ.
canGoBack Только для чтения Экспериментально: Возвращает true если можно перейти назад в истории навигации (т.е. currentEntry не является первой записью в списке записей истории), и false если нет.
canGoForward Только для чтения Экспериментально: Возвращает true если можно перейти вперед в истории навигации (т.е. currentEntry не является последней записью в списке записей истории), и false если нет.
currentEntry Только для чтения Экспериментально: Возвращает объект NavigationHistoryEntry, представляющий местоположение, к которому пользователь сейчас перешёл.
transition Только для чтения Экспериментально: Возвращает объект NavigationTransition, представляющий состояние текущей навигации, который можно использовать для отслеживания. Возвращает null если в настоящее время нет ни одной навигации в процессе.

Методы экземпляра

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

back() Экспериментально: Переходит на предыдущую запись в истории навигации.
entries() Экспериментально: Возвращает массив объектов NavigationHistoryEntry, представляющих все существующие записи истории.
forward() Экспериментально: Переходит к следующей записи в истории навигации.
navigate() Экспериментально: Переходит на определённый URL, обновляя любой предоставленный статус в списке записей истории.
reload() Экспериментально: Перезагружает текущий URL, обновляя любой предоставленный статус в списке записей истории.
traverseTo() Экспериментально: Переходит к определённой записи истории NavigationHistoryEntry, идентифицированной по key.
updateCurrentEntry() Экспериментально: Обновляет состояние currentEntry; используется в тех случаях, когда изменение состояния будет независимым от навигации или перезагрузки.

События

Наследует события от родительского класса, EventTarget.

currententrychange Экспериментально: Срабатывает, когда Navigation.currentEntry изменился.
navigate Экспериментально: Срабатывает, когда любой тип навигации инициируется, позволяя вам перехватывать как необходимо.
navigateerror Экспериментально: Срабатывает, когда навигация завершается ошибкой.
navigatesuccess Экспериментально: Срабатывает, когда успешная навигация завершена.

Примеры

Перемещение вперёд и назад в истории

async function backHandler() {
  if (navigation.canGoBack) {
    await navigation.back().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the first page");
  }
}

async function forwardHandler() {
  if (navigation.canGoForward) {
    await navigation.forward().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the last page");
  }
}

Переход к конкретной записи истории

// On JS startup, get the key of the first loaded page
// so the user can always go back there.
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => navigation.traverseTo(key);

// Navigate away, but the button will always work.
await navigation.navigate("/another_url").finished;

Навигация и обновление состояния

navigation.navigate(url, { state: newState });

Или

navigation.reload({ state: newState });

Или, если состояние независимо от навигации или перезагрузки:

navigation.updateCurrentEntry({ state: newState });

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

Спецификация
HTML # navigation-interface

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`Navigation`	102	102	No	88	No	102	No	70	No	19.0	102
`activation`	123	123	No	109	No	123	No	82	No	27.0	123
`back`	102	102	No	88	No	102	No	70	No	19.0	102
`canGoBack`	102	102	No	88	No	102	No	70	No	19.0	102
`canGoForward`	102	102	No	88	No	102	No	70	No	19.0	102
`currentEntry`	102	102	No	88	No	102	No	70	No	19.0	102
`currententrychange_event`	102	102	No	88	No	102	No	70	No	19.0	102
`entries`	102	102	No	88	No	102	No	70	No	19.0	102
`forward`	102	102	No	88	No	102	No	70	No	19.0	102
`navigate`	102	102	No	88	No	102	No	70	No	19.0	102
`navigate_event`	102	102	No	88	No	102	No	70	No	19.0	102
`navigateerror_event`	102	102	No	88	No	102	No	70	No	19.0	102
`navigatesuccess_event`	102	102	No	88	No	102	No	70	No	19.0	102
`reload`	102	102	No	88	No	102	No	70	No	19.0	102
`transition`	102	102	No	88	No	102	No	70	No	19.0	102
`traverseTo`	102	102	No	88	No	102	No	70	No	19.0	102
`updateCurrentEntry`	102	102	No	88	No	102	No	70	No	19.0	102

См. также

Современная маршрутизация на стороне клиента: API навигации
Пояснение к API навигации
Демонстрация API навигации в реальном времени от Доменик Деникола Navigation API live demo

© 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