Navigation
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Das Navigation
-Interface der Navigation API ermöglicht die Kontrolle über alle Navigationsaktionen für das aktuelle window
an einem zentralen Ort, einschließlich der programmatischen Einleitung von Navigationen, der Untersuchung von Navigationseinträgen in der Historie und der Verwaltung von Navigationen, während sie stattfinden.
Es wird über die Window.navigation
-Eigenschaft aufgerufen.
Die Navigation API gibt nur Historieneinträge wieder, die im aktuellen Browsing-Kontext erstellt wurden und denselben Ursprung wie die aktuelle Seite haben (z. B. keine Navigationen innerhalb eingebetteter <iframe>
s oder über Ursprünge hinweg), und bietet daher eine genaue Liste aller vorherigen Historieneinträge nur für Ihre App. Dies macht das Durchgehen der Historie zu einem viel weniger fragilen Unterfangen im Vergleich zur älteren History API.
Instanzeigenschaften
Erbt Eigenschaften von ihrem Elternteil, EventTarget
.
activation
Nur lesbar Experimentell-
Gibt ein
NavigationActivation
-Objekt zurück, das Informationen über die letzte cross-document Navigation enthält, die dieses Dokument "aktiviert" hat. canGoBack
Nur lesbar Experimentell-
Gibt
true
zurück, wenn es möglich ist, rückwärts in der Navigationhistorie zu navigieren (d. h. dercurrentEntry
ist nicht der erste in der Liste der Historieneinträge), undfalse
, wenn es nicht möglich ist. canGoForward
Nur lesbar Experimentell-
Gibt
true
zurück, wenn es möglich ist, vorwärts in der Navigationhistorie zu navigieren (d. h. dercurrentEntry
ist nicht der letzte in der Liste der Historieneinträge), undfalse
, wenn es nicht möglich ist. currentEntry
Nur lesbar Experimentell-
Gibt ein
NavigationHistoryEntry
-Objekt zurück, das den Ort repräsentiert, zu dem der Benutzer aktuell navigiert ist. transition
Nur lesbar Experimentell-
Gibt ein
NavigationTransition
-Objekt zurück, das den Status einer laufenden Navigation repräsentiert, die verfolgt werden kann. Gibtnull
zurück, wenn aktuell keine Navigation im Gange ist.
Instanzmethoden
Erbt Methoden von ihrem Elternteil, EventTarget
.
back()
Experimentell-
Navigiert um einen Eintrag rückwärts in der Navigationhistorie.
entries()
Experimentell-
Gibt ein Array von
NavigationHistoryEntry
-Objekten zurück, die alle bestehenden Historieneinträge darstellen. forward()
Experimentell-
Navigiert um einen Eintrag vorwärts in der Navigationhistorie.
-
Navigiert zu einer spezifischen URL und aktualisiert dabei gegebenenfalls den Zustand in der Liste der Historieneinträge.
reload()
Experimentell-
Lädt die aktuelle URL neu und aktualisiert dabei gegebenenfalls den Zustand in der Liste der Historieneinträge.
traverseTo()
Experimentell-
Navigiert zu einem spezifischen
NavigationHistoryEntry
, das durchkey
identifiziert ist. updateCurrentEntry()
Experimentell-
Aktualisiert den Zustand des
currentEntry
; wird verwendet in Fällen, in denen die Zustandsänderung unabhängig von einer Navigation oder Neuladen ist.
Ereignisse
Erbt Ereignisse von ihrem Elternteil, EventTarget
.
currententrychange
Experimentell-
Wird ausgelöst, wenn sich der
Navigation.currentEntry
geändert hat. -
Wird ausgelöst, wenn irgendeine Art von Navigation eingeleitet wird, sodass Sie eingreifen können, falls erforderlich.
-
Wird ausgelöst, wenn eine Navigation fehlschlägt.
-
Wird ausgelöst, wenn eine erfolgreiche Navigation abgeschlossen ist.
Beispiele
Im Verlauf vorwärts und rückwärts bewegen
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");
}
}
Zu einem spezifischen Eintrag im Verlauf navigieren
// 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;
Navigieren und den Status aktualisieren
navigation.navigate(url, { state: newState });
Oder
navigation.reload({ state: newState });
Oder wenn der Zustand unabhängig von einer Navigation oder Neuladen ist:
navigation.updateCurrentEntry({ state: newState });
Spezifikationen
Specification |
---|
HTML Standard # navigation-interface |
Browser-Kompatibilität
BCD tables only load in the browser