NavigateEvent: navigationType-Eigenschaft
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 schreibgeschützte navigationType-Eigenschaft des NavigateEvent-Interfaces gibt den Typ der Navigation zurück — push, reload, replace oder traverse.
Wert
Ein enumerierter Wert, der den Typ der Navigation darstellt.
Die möglichen Werte sind:
push: Es wird zu einem neuen Standort navigiert, wodurch ein neuer Eintrag zur Historienliste hinzugefügt wird.reload: DerNavigation.currentEntrywird neu geladen.replace: DerNavigation.currentEntrywird durch einen neuen Verlaufseintrag ersetzt. Dieser neue Eintrag wird denselbenkeywiederverwenden, aber eine andereidzugewiesen bekommen.traverse: Der Browser navigiert von einem bestehenden Verlaufseintrag zu einem anderen bestehenden Verlaufseintrag.
Beispiele
>Asynchrone Übergänge mit spezieller Behandlung von Zurück-/Vorwärts-Navigationen
Manchmal ist es wünschenswert, Zurück-/Vorwärts-Navigationen speziell zu behandeln, z. B. durch Wiederverwendung zwischengespeicherter Ansichten, indem sie auf den Bildschirm gebracht werden. Dies kann wie folgt durch Verzweigungen erreicht werden:
js
navigation.addEventListener("navigate", (event) => {
// Some navigations, e.g. cross-origin navigations, we
// cannot intercept. Let the browser handle those normally.
if (!event.canIntercept) {
return;
}
// Don't intercept fragment navigations or downloads.
if (event.hashChange || event.downloadRequest !== null) {
return;
}
event.intercept({
async handler() {
if (myFramework.currentPage) {
await myFramework.currentPage.transitionOut();
}
let { key } = event.destination;
if (
event.navigationType === "traverse" &&
myFramework.previousPages.has(key)
) {
await myFramework.previousPages.get(key).transitionIn();
} else {
// This will probably result in myFramework storing
// the rendered page in myFramework.previousPages.
await myFramework.renderPage(event.destination);
}
},
});
});
Spezifikationen
| Specification |
|---|
| HTML> # dom-navigateevent-navigationtype-dev> |
Browser-Kompatibilität
Loading…