Navigation: navigate() Methode
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.
Die navigate()
Methode der Navigation
Schnittstelle navigiert zu einer bestimmten URL und aktualisiert jeden angegebenen Zustand in der Liste der Historieneinträge.
Syntax
navigate(url)
navigate(url, options)
Parameter
url
-
Die Ziel-URL, zu der navigiert werden soll. Beachten Sie, dass beim Aufrufen von
navigate()
auf demnavigation
-Objekt eines anderen Fensters die URL relativ zur URL des Ziel-Fensters aufgelöst wird, nicht relativ zur URL des aufrufenden Fensters. Dies entspricht dem Verhalten der History API, aber nicht dem Verhalten der Location API. options
Optional-
Ein Optionen-Objekt, das die folgenden Eigenschaften enthält:
state
Optional-
Vom Entwickler definierte Informationen, die im zugehörigen
NavigationHistoryEntry
gespeichert werden sollen, sobald die Navigation abgeschlossen ist, abrufbar übergetState()
. Dies kann jeder Datentyp sein. Sie könnten beispielsweise die Anzahl der Seitenaufrufe für Analysezwecke speichern oder Details zum UI-Zustand speichern, damit die Ansicht genau so angezeigt werden kann, wie der Benutzer sie zuletzt verlassen hat. Alle imstate
gespeicherten Daten müssen strukturierte-kopierbar sein. info
Optional-
Vom Entwickler definierte Informationen, die an das
navigate
Ereignis übermittelt und inNavigateEvent.info
verfügbar gemacht werden. Dies kann jeder Datentyp sein. Sie könnten beispielsweise neu navigierte Inhalte mit einer anderen Animation basierend darauf anzeigen, wie sie navigiert wurden (Wischen nach links, Wischen nach rechts oder Zurückkehren). Eine Zeichenkette, die angibt, welche Animation verwendet werden soll, könnte alsinfo
übermittelt werden. history
Optional-
Ein enumerierter Wert, der das Verhalten der Historie bei dieser Navigation festlegt. Die verfügbaren Werte sind:
auto
: Der Standardwert; führt normalerweise einepush
-Navigation durch, kann aber unter besonderen Umständen einereplace
-Navigation durchführen (siehe die Beschreibung desNotSupportedError
unten).push
: Fügt einen neuenNavigationHistoryEntry
der Liste der Einträge hinzu oder schlägt unter besonderen Umständen fehl (siehe die Beschreibung desNotSupportedError
unten).replace
: Ersetzt den aktuellenNavigationHistoryEntry
.
Rückgabewert
Ein Objekt mit den folgenden Eigenschaften:
committed
-
Ein
Promise
, das erfüllt wird, wenn sich die sichtbare URL geändert hat und ein neuerNavigationHistoryEntry
erstellt wurde. finished
-
Ein
Promise
, das erfüllt wird, wenn alle Versprechen, die vomintercept()
-Handler zurückgegeben werden, erfüllt sind. Dies entspricht dem Erfüllen desNavigationTransition.finished
Versprechens, wenn dasnavigatesuccess
Ereignis ausgelöst wird.
Eines dieser Versprechen wird abgelehnt, wenn die Navigation aus irgendeinem Grund fehlgeschlagen ist.
Ausnahmen
DataCloneError
DOMException
-
Wird ausgelöst, wenn der
state
Parameter Werte enthalten hat, die nicht strukturierte-kopierbar sind. SyntaxError
DOMException
-
Wird ausgelöst, wenn der
url
Parameter keine gültige URL ist. NotSupportedError
DOMException
-
Wird ausgelöst, wenn die
history
Option aufpush
gesetzt ist und einer der folgenden speziellen Umstände zutrifft:- Der Browser zeigt derzeit das initiale
about:blank
Dokument an. - Das Schema der
url
istjavascript
.
- Der Browser zeigt derzeit das initiale
Beispiele
Home-Button einrichten
function initHomeBtn() {
// Get the key of the first loaded entry
// so the user can always go back to this view.
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => {
navigation.traverseTo(key);
};
}
// Intercept navigate events, such as link clicks, and
// replace them with single-page navigations
navigation.addEventListener("navigate", (event) => {
event.intercept({
async handler() {
// Navigate to a different view,
// but the "home" button will always work.
},
});
});
Ein intelligenter Zurück-Button
Ein von der Seite bereitgestellter "Zurück"-Button kann Sie zurückbringen, auch nach einem Neuladen, indem er die vorherigen Historieneinträge inspiziert:
backButtonEl.addEventListener("click", () => {
if (
navigation.entries()[navigation.currentEntry.index - 1]?.url ===
"/product-listing"
) {
navigation.back();
} else {
// If the user arrived here in some other way
// e.g. by typing the URL directly:
navigation.navigate("/product-listing", { history: "replace" });
}
});
Verwendung von info und state
async function navigateHandler() {
await navigation.navigate(url, {
info: { animation: "swipe-right" },
state: { infoPaneOpen: true },
}).finished;
// Update application state
// ...
}
Spezifikationen
Specification |
---|
HTML Standard # dom-navigation-navigate-dev |
Browser-Kompatibilität
BCD tables only load in the browser