Navigation: navigate-Ereignis
Baseline 2026
Neu verfügbar
Seit Januar 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Das navigate-Ereignis der Navigation-Schnittstelle wird ausgelöst, wenn eine Navigation beliebigen Typs eingeleitet wird. So können Sie bei Bedarf eingreifen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("navigate", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onnavigate = (event) => { }
Ereignistyp
Ein NavigateEvent. Erbt von Event.
Beispiele
Eine Navigation mit intercept() behandeln
navigation.addEventListener("navigate", (event) => {
// Exit early if this navigation shouldn't be intercepted,
// e.g. if the navigation is cross-origin, or a download request
if (shouldNotIntercept(event)) {
return;
}
const url = new URL(event.destination.url);
if (url.pathname.startsWith("/articles/")) {
event.intercept({
async handler() {
// The URL has already changed, so show a placeholder while
// fetching the new content, such as a spinner or loading page
renderArticlePagePlaceholder();
// Fetch the new content and display when ready
const articleContent = await getArticleContent(url.pathname);
renderArticlePage(articleContent);
},
});
}
});
Hinweis:
Bevor die Navigation API verfügbar war, mussten Sie für ein ähnliches Verhalten alle Klickereignisse auf Links überwachen, event.preventDefault() aufrufen, den passenden Aufruf von History.pushState() durchführen und anschließend die Seitenansicht anhand der neuen URL einrichten. Damit ließen sich jedoch nicht alle Navigationen behandeln, sondern nur Link-Klicks, die von Benutzern ausgelöst wurden.
Scrollen mit scroll() behandeln
In diesem Beispiel für das Abfangen einer Navigation ruft die Funktion handler() zunächst Artikelinhalte ab und stellt sie dar. Danach ruft sie weitere Inhalte ab und stellt auch diese dar. Es ist sinnvoll, zur Artikelhauptansicht zu scrollen, sobald sie verfügbar ist, damit Benutzer mit ihr interagieren können, statt zu warten, bis auch die weiteren Inhalte dargestellt sind. Dazu wurde zwischen den beiden Schritten ein Aufruf von scroll() eingefügt.
navigation.addEventListener("navigate", (event) => {
if (shouldNotIntercept(navigateEvent)) {
return;
}
const url = new URL(event.destination.url);
if (url.pathname.startsWith("/articles/")) {
event.intercept({
async handler() {
const articleContent = await getArticleContent(url.pathname);
renderArticlePage(articleContent);
event.scroll();
const secondaryContent = await getSecondaryContent(url.pathname);
addSecondaryContent(secondaryContent);
},
});
}
});
Spezifikationen
| Spezifikation |
|---|
| HTML # event-navigate |