Ändra webbadressen i JavaScript utan att ladda om sidan

Ändra webbadressen dynamiskt med JavaScript

När du arbetar med moderna webbapplikationer kan du behöva ändra webbadressen utan att utlösa en omladdning av sidan. Detta kan vara särskilt användbart för att skapa en sömlös användarupplevelse.

I den här guiden kommer vi att utforska metoder för att ändra delen av URL:en efter domänen, inklusive tekniker som låter dig komma åt delen före hash-symbolen (#). Detta säkerställer efterlevnad av policyer för flera domäner samtidigt som den önskade URL-ändringen uppnås.

Detaljerad förklaring av URL-ändring i JavaScript

Det första skriptet använder history.pushState() metod, som är en del av History API. Detta kommando låter utvecklare lägga till en ny post i webbläsarens sessionshistorikstack, vilket effektivt ändrar URL:en som visas i adressfältet utan att ladda om sidan. I manuset, const newURL = "/page2.php"; sätter den nya vägen, och history.pushState(null, "", newURL); ändrar webbadressen till denna nya sökväg. Genom att linda in history.pushState kommando i en funktion som function changeURL(newPath), kan vi uppdatera webbadressen dynamiskt efter behov. Den här tekniken är särskilt användbar för ensidiga applikationer (SPA) där innehåll förändras dynamiskt utan att ladda om hela sidan.

Det andra skriptet adresserar ändring av URL-hash med hjälp av window.location.hash. Den här egenskapen hämtar eller ställer in ankardelen av webbadressen som följer hash-symbolen (#). Genom att sätta const hashValue = "newSection"; och window.location.hash = hashValue;, webbadressens hash ändras till #newSection utan att ladda om sidan. Det här tillvägagångssättet är användbart för att navigera på samma sida eller länka till specifika avsnitt i ett dokument. Dessutom funktionen function updateHash(newHash) kapslar in denna funktion, vilket gör det enkelt att ändra hash-delen av URL:en dynamiskt. Båda skripten tillhandahåller sömlösa sätt att ändra webbadressen och förbättra användarupplevelsen genom att undvika onödiga omladdningar av sidor.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Utforska ytterligare metoder för att ändra webbadressen utan att ladda om

En annan aspekt av att ändra webbadressen utan att ladda om sidan innebär att använda replaceState() metod från History API. Medan pushState() lägger till en ny historikpost, replaceState() ändrar den aktuella historikposten. Detta kan vara särskilt användbart när du vill ändra webbadressen utan att belamra användarens historia med flera tillstånd. Om du till exempel har ett program på en sida där innehållet ändras ofta, kanske du vill uppdatera webbadressen för att återspegla det aktuella läget utan att lägga till varje ändring i historiken. Detta håller bakåtknappens funktionalitet ren och användarvänlig.

Att använda replaceState(), kan du skriva en funktion som liknar changeURL() utan ring istället history.replaceState() innuti. Till exempel, function replaceURL(newPath) kunde utnyttja history.replaceState(null, "", newPath); för att uppdatera URL:en. Den här tekniken är värdefull för att förbättra användarupplevelsen genom att hålla URL:en synkroniserad med programmets tillstånd utan att skapa onödiga historikposter. Dessutom erbjuder det ett mer effektivt sätt att hantera webbläsarens historik, särskilt i dynamiska webbapplikationer.