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 vor der Verwendung auf produktiven Webseiten.
Die navigate()
-Methode der Navigation
-Schnittstelle navigiert zu einer bestimmten URL und aktualisiert dabei jeden bereitgestellten 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 einemnavigation
-Objekt eines anderen Fensters die URL relativ zur URL des Ziel-Fensters aufgelöst wird, nicht zur URL des aufrufenden Fensters. Dies entspricht dem Verhalten der History API, aber nicht dem Verhalten der Location API. options
Optional-
Ein Optionsobjekt, das folgende Eigenschaften enthält:
state
Optional-
Entwicklerdefinierte Informationen, die im zugehörigen
NavigationHistoryEntry
gespeichert werden, sobald die Navigation abgeschlossen ist, abrufbar übergetState()
. Dies kann ein beliebiger Datentyp sein. Sie möchten beispielsweise für Analysezwecke möglicherweise eine Seitenaufrufanzahl speichern oder UI-Zustandsdetails speichern, damit die Ansicht genau so angezeigt werden kann, wie der Benutzer sie zuletzt verlassen hat. Alle instate
gespeicherten Daten müssen struktur-klonbar sein. info
Optional-
Entwicklerdefinierte Informationen, die an das
navigate
-Ereignis übergeben werden, verfügbar inNavigateEvent.info
. Dies kann ein beliebiger Datentyp sein. Sie möchten beispielsweise neu navigierte Inhalte mit einer anderen Animation anzeigen, je nachdem, wie zu ihnen navigiert wurde (nach links wischen, nach rechts wischen oder nach Hause gehen). Ein String, der angibt, welche Animation verwendet werden soll, könnte alsinfo
übergeben werden. history
Optional-
Ein enumerierter Wert, der das Historienverhalten dieser Navigation festlegt. Die verfügbaren Werte sind:
auto
: Der Standardwert; wird normalerweise einepush
-Navigation ausführen, jedoch unter besonderen Umständen einereplace
-Navigation (siehe Beschreibung desNotSupportedError
unten).push
: Wird einen neuenNavigationHistoryEntry
zur Liste der Einträge hinzufügen oder unter besonderen Umständen scheitern (siehe Beschreibung desNotSupportedError
unten).replace
: Wird den aktuellenNavigationHistoryEntry
ersetzen.
Rückgabewert
Ein Objekt mit 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 von derintercept()
-Handler zurückgegebenen Versprechen 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 enthielt, die nicht struktur-klonbar 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 besonderen 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
Ein 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 auch nach einem Neuladen zurückführen, 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 # dom-navigation-navigate-dev |