Denne artikel vil beskrive metoderne til at ændre URL'en uden at genindlæse websiden ved hjælp af JavaScript.
Hvordan ændres/ændres URL'en i JavaScript uden at genindlæse siden?
For at ændre URL'en uden at genindlæse websiden skal du bruge følgende foruddefinerede JavaScript-metode:
Metode 1: Rediger URL'en i JavaScript uden at genindlæse siden ved hjælp af 'pushState()'-metoden
For at ændre URL'en uden at genindlæse websiden skal du bruge ' pushState() ” metode. Det er en funktion eller den foruddefinerede metode til ' historie Objekt ”, der gør det muligt at ændre browserhistorikken uden at navigere eller opdatere siden. Det tilføjer eller ændrer blot historiestakken og indlæser ikke en ny side. Ved at bruge denne tilgang kan du skifte frem og tilbage mellem siderne ved at tilføje en ny post til browserens historiestack.
Syntaks
Følg den givne syntaks for 'pushState()'-metoden:
vindue. historie . pushState ( stat , titel , url ) ;
Her:
- “ stat ” repræsenterer den nye historiepost.
- “ titel ” er den særlige tekst, der kan vises i browserens titellinje.
- “ url ” angiver den erstattede URL som en ny post.
Eksempel
I en HTML-fil skal du oprette fire knapper, der kalder ' modifyUrl() ” funktion på knappen klik:
< knap ved klik = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 knap >
< knap ved klik = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 knap >
< knap ved klik = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 knap >
Definer en funktion ' modifyUrl() ” i en JavaScript-fil, der udløses ved knapklik. Det kræver to parametre, ' titel ' og ' url ”. Når metoden kaldes på knappen, vil 'titlen' og 'url'en blive sendt som argumenter. Kontroller typen af ' pushState ' af historieobjektet, hvis det ikke er ' udefineret ”. Ring derefter til ' history.pushState() ' metode til at ændre URL'en:
fungere modifyUrl ( titel , url ) {
hvis ( type ( historie. pushState ) != 'udefineret' ) {
var obj = {
Titel : titel ,
URL : url
} ;
historie. pushState ( obj , obj. Titel , obj. URL ) ;
}
}
Det kan ses, at ved hvert knapklik vil URL'en blive ændret uden at genindlæse siden:
I ovenstående output kan du se, at tilbagepilknappen øverst til venstre ( <- ) er aktiveret, mens du klikker på knappen, indikerer det, at du kan navigere frem og tilbage, fordi ' pushState() ”-metoden tilføjer den nye URL på historiestakken.
Metode 2: Rediger URL'en i JavaScript uden at genindlæse siden ved at bruge metoden 'replaceState()'
Brug ' replaceState() ” metode til at ændre URL'en uden at genindlæse websiden. Det er også et træk ved ' historie Objekt ” men det vil ikke tilføje en ny post til historiestakken. Det ændrer den eksisterende tilstand af browserens historie og erstatter den med en ny tilstand. Ved at bruge denne tilgang kan du ikke skifte frem og tilbage mellem siderne.
Syntaks
Den givne syntaks bruges til 'replaceState()'-metoden:
Eksempel
I den definerede funktion skal du kalde ' replaceState() ” metode til at erstatte URL'en på knappen klik uden at genindlæse eller navigere på siden:
hvis ( type ( historie. erstatteStat ) != 'udefineret' ) {
var obj = {
Titel : titel ,
URL : url
} ;
historie. erstatteStat ( obj , obj. Titel , obj. URL ) ;
}
}
Outputtet indikerer, at URL'en er blevet ændret ved hvert klik på en knap, og der er ingen mulighed for at navigere for at gå tilbage, da tilbagepilen er deaktiveret:
Vi har leveret alle de væsentlige oplysninger, der er relevante for ændringen af URL'en uden at genindlæse siden i JavaScript.
Konklusion
For at ændre/ændre URL'en uden at opdatere websiden, skal du bruge ' pushState() '-metoden eller ' replaceState() ” metode. 'pushState()'-metoden tilføjer den nye URL som en ny post i en historiestak og giver brugerne mulighed for at navigere frem og tilbage. Mens metoden 'replaceState()' erstatter URL'en og ikke tillader flytning til bagsiden. Denne artikel beskrev metoderne til at ændre URL'en uden at genindlæse websiden ved hjælp af JavaScript.