Endre URL-en i JavaScript uten å laste inn siden på nytt

Endre URL dynamisk med JavaScript

Når du arbeider med moderne nettapplikasjoner, kan det hende du trenger å endre URL-en uten å utløse en sideinnlasting. Dette kan være spesielt nyttig for å skape en sømløs brukeropplevelse.

I denne veiledningen vil vi utforske metoder for å endre delen av URL-en etter domenet, inkludert teknikker som lar deg få tilgang til delen før hash-symbolet (#). Dette sikrer overholdelse av retningslinjene på tvers av domener samtidig som ønsket URL-endring oppnås.

Detaljert forklaring av URL-endring i JavaScript

Det første skriptet bruker history.pushState() metode, som er en del av History API. Denne kommandoen lar utviklere legge til en ny oppføring i nettleserens sesjonshistorikk, og effektivt endre URL-en som vises i adressefeltet uten å laste inn siden på nytt. I manuset, const newURL = "/page2.php"; setter den nye veien, og history.pushState(null, "", newURL); endrer URL-en til denne nye banen. Ved å pakke inn history.pushState kommando i en funksjon som function changeURL(newPath), kan vi dynamisk oppdatere URL-en etter behov. Denne teknikken er spesielt nyttig for enkeltsideapplikasjoner (SPAer) der innhold endres dynamisk uten å laste hele siden på nytt.

Det andre skriptet adresserer endring av URL-hash ved hjelp av window.location.hash. Denne egenskapen henter eller setter ankerdelen av URL-en som følger hash-symbolet (#). Ved å stille inn const hashValue = "newSection"; og window.location.hash = hashValue;, endres URL-hashen til #newSection uten å laste inn siden på nytt. Denne tilnærmingen er nyttig for å navigere på samme side eller lenke til bestemte deler i et dokument. I tillegg funksjonen function updateHash(newHash) innkapsler denne funksjonaliteten, noe som gjør det enkelt å endre hash-delen av URL-en dynamisk. Begge skriptene gir sømløse måter å endre URL-en på og forbedre brukeropplevelsen ved å unngå unødvendig sideinnlasting.

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");

Utforske flere metoder for å endre URL-en uten å laste på nytt

Et annet aspekt ved å endre nettadressen uten å laste inn siden på nytt innebærer å bruke replaceState() metode fra History API. Samtidig som pushState() legger til en ny historieoppføring, replaceState() endrer gjeldende historieoppføring. Dette kan være spesielt nyttig når du vil endre URL-en uten å fylle brukerens historie med flere tilstander. Hvis du for eksempel har et enkeltsideprogram der innholdet endres ofte, kan det være lurt å oppdatere URL-en slik at den gjenspeiler gjeldende tilstand uten å legge til hver endring i loggen. Dette holder tilbake-knappens funksjonalitet ren og brukervennlig.

Å bruke replaceState(), kan du skrive en funksjon som ligner på 1. 3 men ring i stedet history.replaceState() inni det. For eksempel, function replaceURL(newPath) kunne utnytte history.replaceState(null, "", newPath); for å oppdatere URL-en. Denne teknikken er verdifull for å forbedre brukeropplevelsen ved å holde URL-en synkronisert med applikasjonens tilstand uten å lage unødvendige historieoppføringer. Videre tilbyr den en mer effektiv måte å administrere nettleserens historie, spesielt i dynamiske nettapplikasjoner.