Denne artikkelen vil beskrive metodene for å endre URL-en uten å laste inn nettsiden på nytt med JavaScript.
Hvordan endre/endre URL i JavaScript uten å laste inn siden på nytt?
For å endre URL-en uten å laste inn nettsiden på nytt, bruk følgende forhåndsdefinerte JavaScript-metode:
Metode 1: Endre URL-en i JavaScript uten å laste siden på nytt ved å bruke 'pushState()'-metoden
For å endre URL-en uten å laste inn nettsiden på nytt, bruk ' pushState() 'metoden. Det er en funksjon eller den forhåndsdefinerte metoden for ' historie Objekt ” som gjør det mulig å endre nettleserloggen uten å navigere eller oppdatere siden. Den legger bare til eller endrer historiestabelen og laster ikke inn en ny side. Ved å bruke denne tilnærmingen kan du bytte frem og tilbake mellom sidene ved å legge til en ny oppføring i historiestabelen til nettleseren.
Syntaks
Følg den gitte syntaksen for 'pushState()'-metoden:
vindu. historie . pushState ( stat , tittel , url ) ;
Her:
- ' stat ” representerer den nye historieoppføringen.
- ' tittel ” er den spesielle teksten som kan vises i tittellinjen i nettleseren.
- ' url ” indikerer den erstattede URL-en som en ny oppføring.
Eksempel
I en HTML-fil oppretter du fire knapper som kaller ' modifyUrl() ' funksjon på knappen klikk:
< knappen ved å klikke = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 knapp >
< knappen ved å klikke = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 knapp >
< knappen ved å klikke = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 knapp >
Definer en funksjon ' modifyUrl() ” i en JavaScript-fil som utløses ved knappeklikk. Det krever to parametere, ' tittel ' og ' url '. Når metoden kalles på knappen klikk, vil 'tittel' og 'url' bli sendt som argumenter. Sjekk typen av ' pushState ' av historieobjektet, hvis det ikke er ' udefinert '. Deretter ringer du ' history.pushState() ' metode for å endre URL:
funksjon modifyUrl ( tittel , url ) {
hvis ( type ( historie. pushState ) != 'udefinert' ) {
var obj = {
Tittel : tittel ,
URL : url
} ;
historie. pushState ( obj , obj. Tittel , obj. URL ) ;
}
}
Det kan sees at ved hvert knappeklikk vil URL-en endres uten å laste inn siden på nytt:
I utgangen ovenfor kan du se at tilbakepilknappen øverst til venstre ( <- ) er aktivert mens du klikker på knappen, indikerer det at du kan navigere frem og tilbake fordi ' pushState() ”-metoden legger til den nye URL-en på historiestabelen.
Metode 2: Endre URL-en i JavaScript uten å laste siden på nytt ved å bruke 'replaceState()'-metoden
Bruke ' replaceState() ” metode for å endre URL-en uten å laste inn nettsiden på nytt. Det er også en funksjon av ' historie Objekt ” men det vil ikke legge til en ny oppføring i historiestabelen. Den endrer den eksisterende tilstanden til nettleserens historie og erstatter den med en ny tilstand. Ved å bruke denne tilnærmingen kan du ikke bytte frem og tilbake mellom sidene.
Syntaks
Den gitte syntaksen brukes for 'replaceState()'-metoden:
Eksempel
I den definerte funksjonen kaller du ' replaceState() ” metode for å erstatte URL-en på knappen klikk uten å laste inn på nytt eller navigere på siden:
hvis ( type ( historie. erstatteState ) != 'udefinert' ) {
var obj = {
Tittel : tittel ,
URL : url
} ;
historie. erstatteState ( obj , obj. Tittel , obj. URL ) ;
}
}
Utdataene indikerer at URL-en er endret ved hvert klikk på en knapp, og det er ingen mulighet for å navigere for å gå tilbake ettersom tilbakepilknappen er deaktivert:
Vi har gitt all viktig informasjon som er relevant for endring av nettadressen uten å laste inn siden på nytt i JavaScript.
Konklusjon
For å endre/endre URL-en uten å oppdatere nettsiden, bruk ' pushState() '-metoden eller ' replaceState() 'metoden. 'pushState()'-metoden legger til den nye URL-en som en ny oppføring i en historiestabel og lar brukere navigere frem og tilbake. Mens 'replaceState()'-metoden erstatter URL-en og ikke tillater flytting til baksiden. Denne artikkelen beskrev metodene for å endre URL-en uten å laste inn nettsiden på nytt med JavaScript.