De Navigation API in moderne browsers
Gebruik de Navigation API om navigaties te onderscheppen en aan te passen
De Navigation API in moderne browsers is een gratis HTML Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Een moderne vervanging
De Navigation API is een nieuwere, krachtigere vervanging voor de History API. Deze behandelt navigaties als volwaardige objecten die je kunt onderscheppen, afbreken en afwachten — beter afgestemd op de manier waarop SPA's routering in 2024 werkelijk moeten afhandelen.
Het object window.navigation
window.navigation geeft toegang tot de lijst met items, het huidige item en de gebeurtenis navigate. navigation.entries() geeft elk item in de huidige geschiedenis terug; navigation.currentEntry is het actieve item. Vergelijk dit met de ondoorzichtige lengte en onleesbare status van de History API.
De gebeurtenis navigate
Luister naar navigation.addEventListener("navigate", handler) om elke navigatie binnen hetzelfde document te onderscheppen — kliks op links, formulierverzendingen, achteruit- en vooruitnavigatie en programmatische navigatie. Eén koppelpunt vervangt de lappendeken van klikonderschepping, popstate-listeners en listeners voor formulierverzendingen.
navigation.addEventListener("navigate", (e) => {
if (!e.canIntercept) return;
e.intercept({
handler: async () => {
await renderPage(new URL(e.destination.url).pathname);
}
});
});intercept en handler
Als je e.intercept({ handler }) aanroept, neem je de navigatie over. De handler geeft een promise terug; zolang deze loopt, is de navigatie "bezig" en is de URL al bijgewerkt. Hiermee wordt de historische race tussen de URL-wijziging en het weergeven van de weergave verenigd.
Controle met canIntercept
Niet alle navigaties kunnen worden onderschept, zoals navigaties naar een andere oorsprong en downloads. Controleer e.canIntercept voordat je intercept aanroept. Deze defensieve controle is één regel lang en maakt onderscheid tussen SPA-navigatie en daadwerkelijk vertrek naar een andere oorsprong.
De methode navigation.navigate
navigation.navigate(url, options) start programmatisch een navigatie, vergelijkbaar met een klik. Het geretourneerde object bevat promises committed en finished, zodat je kunt wachten op de URL-wijziging of op het volledig voltooien van de handler.
Status en sleutels van items
Elk navigatie-item heeft een stabiele key, die behouden blijft na opnieuw laden, en een id, die per sessie geldt. Gebruik de key voor blijvende status, zoals opgeslagen scrollposities en concepten van formulieren, en id voor tijdelijke status. De enige status van de History API was een ondoorzichtige gegevensblob.
Achteruit en vooruit
navigation.back() en navigation.forward() zijn handige wrappers rond traverseTo. Ze geven hetzelfde paar promises, { committed, finished }, terug, zodat je op de achteruitnavigatie kunt wachten voordat je vervolgtaken uitvoert.
Navigaties afbreken
Als de gebruiker op een tweede link klikt terwijl de eerste nog wordt weergegeven, kan de navigatie die bezig is worden afgebroken. De handler ontvangt via e.signal een AbortSignal; geef die door aan fetch-aanroepen, zodat verouderd werk wordt geannuleerd zodra de nieuwe navigatie begint.
e.intercept({
handler: async () => {
const data = await fetch(url, { signal: e.signal });
renderPage(await data.json());
}
});Waarom niet gewoon History gebruiken?
De History API werkt, maar is omslachtig: statuswijzigingen en het renderen van de interface zijn ontkoppeld, klikafhandeling is handmatig, coördinatie tussen meerdere listeners is kwetsbaar en het herstellen van de scrollpositie is onvolledig. De Navigation API is vanaf het begin ontworpen voor SPA-behoeften en pakt elk van deze problemen aan.
Browserondersteuning
Chrome en Edge ondersteunen de Navigation API. Safari en Firefox lopen achter (begin 2026); lever code die functiedetectie uitvoert ("navigation" in window) en terugvalt op History + popstate wanneer die niet beschikbaar is. Frameworks zoals SvelteKit en TanStack Router verpakken deze detectie al.
Wanneer overstappen
Voor nieuwe projecten die zich richten op doelgroepen die Chromium als eerste gebruiken, kun je nu overstappen en de History-terugvaloptie accepteren. Wacht voor openbare websites voor een breed publiek op ondersteuning in Safari/Firefox (of gebruik een routerbibliotheek die beide mogelijkheden afhandelt). De eenvoudigere API is het wachten waard.
Kennistoets
Wat is het belangrijkste voordeel van het navigate-event van de Navigation API ten opzichte van de combinatie van popstate en handmatige klikonderschepping van de History API?
Samenvatting
De Navigation API brengt SPA-navigatie samen in één navigate-event met intercept-/abort-semantiek, stabiele sleutels per entry en het asynchroon afwachten van handlers. Hiermee vervangt de API het lapwerk van History+popstate+klikonderschepping. De API wordt nu ondersteund in Chromium-browsers; voer functiedetectie uit en val voor browseroverschrijdende code terug op History totdat Safari en Firefox zijn bijgebeend.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “De Navigation API in moderne browsers” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “De Navigation API in moderne browsers”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “De Navigation API in moderne browsers”?
Gebruik de Navigation API om navigaties te onderscheppen en aan te passen Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “De Navigation API in moderne browsers”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- pushState en replaceState
- Het popstate-event
- Routing op basis van hash versus pad
- De Navigation API in moderne browsers