NavigateEvent: intercept() 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 intercept()
Methode des NavigateEvent
Interface fängt diese Navigation ab und wandelt sie in eine Navigation innerhalb des gleichen Dokuments zur destination
URL um.
Syntax
intercept()
intercept(options)
Parameter
options
Optional-
Ein Optionsobjekt, das die folgenden Eigenschaften enthält:
handler
Optional-
Eine Callback-Funktion, die definiert, wie das Navigationsverhalten gehandhabt werden sollte. Dies betrifft im Allgemeinen das Abrufen von Ressourcen und gibt ein Versprechen zurück.
focusReset
Optional-
Definiert das Fokusverhalten der Navigation. Dies kann einen der folgenden Werte annehmen:
after-transition
-
Sobald das Versprechen, das von Ihrer Handler-Funktion zurückgegeben wird, aufgelöst ist, fokussiert der Browser das erste Element mit dem
autofocus
Attribut oder das<body>
Element, wenn kein Elementautofocus
gesetzt hat. Dies ist der Standardwert. manual
-
Deaktiviert das Standardverhalten.
scroll
Optional-
Definiert das Scrollverhalten der Navigation. Dies kann einen der folgenden Werte annehmen:
after-transition
-
Ermöglicht dem Browser das Scrollen zu handhaben, z.B. indem zu dem relevanten Fragment-Identifikator gescrollt wird, wenn die URL ein Fragment enthält, oder die Scrollposition an die gleiche Stelle wie beim letzten Mal wiederhergestellt wird, wenn die Seite neu geladen wird oder eine Seite in der Historie erneut aufgerufen wird. Dies ist der Standardwert.
manual
-
Deaktiviert das Standardverhalten.
Rückgabewert
Keiner (undefined
).
Ausnahmen
InvalidStateError
DOMException
-
Wird ausgelöst, wenn das aktuelle
Document
noch nicht aktiv ist oder wenn die Navigation abgebrochen wurde. SecurityError
DOMException
-
Wird ausgelöst, wenn das Ereignis durch einen
dispatchEvent()
Aufruf und nicht durch den User-Agent ausgelöst wurde oder wenn die Navigation nicht abgefangen werden kann (z.B. wennNavigateEvent.canIntercept
false
ist).
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);
},
});
}
});
Verwendung von focusReset
und scroll
Das Absenden eines Formulars kann durch Abfragen der NavigateEvent.formData
Eigenschaft erkannt werden. Das folgende Beispiel macht jede Formularübermittlung zu einer, die auf der aktuellen Seite bleibt. In diesem Fall aktualisieren Sie das DOM nicht, sodass Sie das Standardverhalten für Zurücksetzen und Scrollen mit focusReset
und scroll
abbrechen können.
navigation.addEventListener("navigate", (event) => {
if (event.formData && event.canIntercept) {
// User submitted a POST form to a same-domain URL
// (If canIntercept is false, the event is just informative:
// you can't intercept this request, although you could
// likely still call .preventDefault() to stop it completely).
event.intercept({
// Since we don't update the DOM in this navigation,
// don't allow focus or scrolling to reset:
focusReset: "manual",
scroll: "manual",
async handler() {
await fetch(event.destination.url, {
method: "POST",
body: event.formData,
});
// You could navigate again with {history: 'replace'} to change the URL here,
// which might indicate "done"
},
});
}
});
Spezifikationen
Specification |
---|
HTML # dom-navigateevent-intercept-dev |