Navigation: navigate-Event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Der navigate-Ereignis des Navigation-Interfaces wird ausgelöst, wenn eine beliebige Art der Navigation eingeleitet wird, sodass Sie diese bei Bedarf abfangen können.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("navigate", (event) => { })
onnavigate = (event) => { }
Ereignistyp
Ein NavigateEvent. Erbt von Event.
Beispiele
Handhabung einer Navigation mit intercept()
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, um etwas Ähnliches zu erreichen, auf alle Klickereignisse bei Links hören, event.preventDefault() ausführen, den entsprechenden History.pushState()-Aufruf durchführen und dann die Seitenansicht basierend auf der neuen URL einrichten. Und dies würde nicht alle Navigationsvorgänge abdecken – nur benutzerinitiierte Link-Klicks.
Handhabung des Scrollens mit scroll()
In diesem Beispiel zum Abfangen einer Navigation beginnt die Funktion handler() damit, einige Artikelinhalte abzurufen und darzustellen. Anschließend werden jedoch einige sekundäre Inhalte abgerufen und gerendert. Es ist sinnvoll, die Seite auf die Hauptartikelinhalte zu scrollen, sobald diese verfügbar sind, sodass der Benutzer damit interagieren kann, anstatt darauf zu warten, dass auch die sekundären Inhalte gerendert werden. Um dies zu erreichen, haben wir einen scroll()-Aufruf zwischen den beiden hinzugefü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
| Specification |
|---|
| HTML # event-navigate |