Navigation API i moderne browsere
Brug Navigation API til at opfange og tilpasse navigationer
Navigation API i moderne browsere er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
En moderne erstatning
Navigation API er en nyere og mere kraftfuld erstatning for History API. Den behandler navigationer som førsteklasses objekter, som du kan opsnappe, afbryde og afvente — tættere på den måde, SPA'er faktisk skal håndtere routing på i 2024.
Objektet window.navigation
window.navigation giver adgang til postlisten, den aktuelle post og navigate-hændelsen. navigation.entries() returnerer alle poster i den aktuelle historik; navigation.currentEntry er den aktive post. Sammenlign det med History API's uigennemsigtige length og ulæselige tilstand.
Hændelsen navigate
Lyt efter navigation.addEventListener("navigate", handler) for at opsnappe alle navigationer i samme dokument — klik på links, formularindsendelser, tilbage- og frem-navigation samt programmatisk navigation. Et enkelt tilslutningspunkt erstatter samlingen af lyttere til klikopsnapning, popstate og formularindsendelser.
navigation.addEventListener("navigate", (e) => {
if (!e.canIntercept) return;
e.intercept({
handler: async () => {
await renderPage(new URL(e.destination.url).pathname);
}
});
});intercept og handler
Et kald til e.intercept({ handler }) overtager navigationen. Handler returnerer et promise; mens det afventer, er navigationen "i gang", og URL'en er allerede opdateret. Det eliminerer den klassiske kapløbstilstand mellem URL-ændringen og gengivelsen af visningen.
Kontrol af canIntercept
Ikke alle navigationer kan opsnappes (navigationer på tværs af origins og downloads). Kontrollér e.canIntercept, før du kalder intercept. Dette defensive tjek på én linje skelner mellem SPA-navigation og en reel navigation væk fra origin.
Metoden navigation.navigate
navigation.navigate(url, options) udløser programmatisk en navigation, svarende til et klik. Det returnerede objekt har committed- og finished-promises, så du kan afvente enten URL-ændringen eller hele handlerens gennemførelse.
Tilstand og nøgler for navigationsposter
Hver navigationspost har en stabil key (på tværs af genindlæsninger) og et id (pr. session). Brug key til vedvarende tilstand (gemte rullepositioner, formularudkast) og id til midlertidig tilstand. History API's eneste tilstand var et uigennemsigtigt dataobjekt.
Tilbage og frem
navigation.back() og navigation.forward() er praktiske wrappers omkring traverseTo. De returnerer det samme par af { committed, finished }-promises, så du kan afvente tilbage-navigationen, før du udfører opfølgende arbejde.
Afbryd navigationer
Hvis brugeren klikker på endnu et link, mens det første stadig gengives, kan den igangværende navigation afbrydes. Håndteringsfunktionen modtager et AbortSignal via e.signal; send det videre til fetch-kald, så forældet arbejde annulleres, når den nye navigation begynder.
e.intercept({
handler: async () => {
const data = await fetch(url, { signal: e.signal });
renderPage(await data.json());
}
});Hvorfor ikke bare bruge History?
History API fungerer, men er besværligt: ændringer i tilstanden og gengivelsen af visningen er koblet fra hinanden, håndtering af klik er manuel, koordinering af flere lyttere er skrøbelig, og gendannelse af rullepositionen er ufuldstændig. Navigation API blev designet til SPA-behov fra starten og løser alle disse problemer.
Browserunderstøttelse
Chrome og Edge understøtter Navigation API. Safari og Firefox er bagefter (i begyndelsen af 2026); udgiv kode, der registrerer funktionen ("navigation" in window) og bruger History + popstate som reserve, når den ikke er tilgængelig. Frameworks som SvelteKit og TanStack Router indkapsler allerede denne registrering.
Hvornår bør du tage det i brug
Til nye projekter, der målrettes mod brugere, som primært anvender Chromium, bør du tage det i brug nu og acceptere History som reserve. Til offentlige websteder med en bred målgruppe bør du vente på understøttelse i Safari og Firefox (eller bruge et routerbibliotek, der abstraherer over begge dele). Den enklere API er værd at vente på.
Test din viden
Hvad er den største fordel ved Navigation API's navigate-hændelse sammenlignet med History API's kombination af popstate og manuel aflytning af klik?
Opsummering
Navigation API samler SPA-navigation under én navigate-hændelse med semantik for intercept og abort, stabile nøgler pr. post og afventning af asynkrone håndteringsfunktioner. Den erstatter det kludetæppe, som History+popstate+click-interception udgør. Den understøttes i Chromium-browsere i dag; registrér funktionen, og brug History som reserve i kode til flere browsere, indtil Safari og Firefox følger efter.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Navigation API i moderne browsere” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Navigation API i moderne browsere”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Navigation API i moderne browsere”?
Brug Navigation API til at opfange og tilpasse navigationer Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Navigation API i moderne browsere”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- pushState og replaceState
- popstate-hændelsen
- Hashbaseret kontra stibaseret routing
- Navigation API i moderne browsere