HTML Academy · Lektion

pushState og replaceState

Opdatér browserens URL uden at genindlæse hele siden

Lektion 1 af 414 trin

pushState og replaceState er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 1 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.

History API

History API gør det muligt for en side at ændre den URL, der vises i adresselinjen, uden at udløse en fuld navigation. Kombineret med gengivelse på klientsiden danner dette grundlaget for enkeltsidesapplikationer, der føles som indbyggede applikationer uden at give afkald på URL'er, der kan bogmærkes.

pushState

history.pushState(state, "", url) tilføjer en ny post i browserhistorikken. URL'en i adresselinjen opdateres med det samme, og der sendes ingen netværksanmodning. Brugeren kan gå tilbage til den forrige post med browserens tilbageknap.

history.pushState({ view: "settings" }, "", "/settings");

Argumentet state

Det første argument er vilkårlige serialiserbare data, der knyttes til posten. Læs dem senere via history.state eller i popstate-hændelser. Brug dem til at gemme tilstand i brugergrænsefladen (hvilken fane der var åben, og rullepositionen), så navigation tilbage kan gendanne den nøjagtige visning.

Argumentet title

Det andet argument er historikpostens titel. I praksis ignorerer alle moderne browsere det — angiv direkte document.title = "..." for at ændre titlen. Angiv en tom streng som konvention; det har ingen effekt.

Argumentet url

Det tredje argument er den nye URL. Relative URL'er opløses i forhold til den aktuelle side; den nye URL skal have samme origin (cross-origin udløser SecurityError). Browsere henter ikke URL'en — pushState opdaterer kun adresselinjen og historikken.

replaceState

history.replaceState(state, "", url) erstatter den aktuelle historikpost i stedet for at tilføje en ny. Brug det, når du vil opdatere URL'en uden at oprette et nyt trin ved tilbage-navigation, f.eks. ved opdatering af en filterets querystreng.

// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);

Anvendelsesområder for pushState

SPA-ruteændringer (klik på et navigationslink uden fuld genindlæsning), åbning af et modalvindue (så tilbageknappen lukker det) og trinændringer i en guide. Hver meningsfuld tilstand bør være en ny historikpost, så tilbageknappen gør det, brugerne forventer.

Anvendelsesområder for replaceState

Opdateringer af filtre, sortering og sideinddeling, som ikke bør fylde historikken, omdirigering efter delvis udfyldning af en formular og opdatering af sporingsparametre uden at oprette navigerbare poster. Når brugeren trykker tilbage, springes disse "mellemtilstande" over.

Opdater visningen efter pushState

pushState ændrer kun URL'en — din kode skal opdatere DOM'en separat. Mønstret er: gengiv det nye indhold, og kald derefter pushState. Tilsammen skaber de SPA-oplevelsen.

function navigate(path) {
  renderPage(path);
  history.pushState(null, "", path);
  window.scrollTo(0, 0);
}

Opdatering af titel og metadata

Opdater document.title og metatags med og:title efter navigation, så deling på sociale medier og titler på browserfaner afspejler den aktuelle visning. Hvis du glemmer dette, står den oprindelige titel på efterfølgende delinger — en subtil, men almindelig fejl i SPA'er.

Første pushState ved sideindlæsning

Hvis du kalder pushState, før brugeren har navigeret, overskriver du den oprindelige historikpost. Hvis du vil knytte tilstand til sidens første post, skal du i stedet bruge replaceState — det tilføjer tilstanden uden at ændre historikkens dybde.

Sikkerhedsbegrænsning

URL'er til pushState skal have samme origin. Hvis du forsøger at udføre pushState til https://evil.com, udløses SecurityError. Det forhindrer sider i at forfalske adresselinjen, så brugere tror, at de befinder sig på et andet websted.

Videnstjek

Hvad gør history.replaceState, som history.pushState ikke gør?

Besvar den i den interaktive lektion

Opsummering

pushState tilføjer en ny historikpost uden genindlæsning af siden — grundlaget for SPA-routing. replaceState opdaterer den aktuelle post på stedet ved kosmetiske URL-ændringer. Begge kræver URL'er med samme origin og ignorerer title-argumentet. Opdater altid DOM'en separat, og husk at opdatere document.title og metatags efter navigation.

Gratis at komme i gang

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

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “pushState og replaceState” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “pushState og replaceState”, 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 “pushState og replaceState”?

Opdatér browserens URL uden at genindlæse hele siden 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 1 af 4.

Hvor lang tid tager lektionen “pushState og replaceState”?

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

← Tilbage til HTML Academy