Hvordan endre nettadressen i JavaScript uten å laste inn siden på nytt

Endring av URL uten å laste inn siden kan være en veldig nyttig strategi for å lage mer spennende og dynamiske nettsteder ved hjelp av JavaScript. For eksempel å opprette et enkelt sides nettsted der brukeren samhandler med forskjellige deler/deler av nettstedet uten å navigere/omdirigere til en ny side er en vanlig brukssak for å endre URL uten å laste inn siden på nytt. Som kan resultere i en mer konsistent og responsiv brukeropplevelse.

Denne artikkelen vil beskrive metodene for å endre nettadressen uten å laste opp websiden på nytt ved hjelp av JavaScript.

Hvordan endre/endre URL i JavaScript uten å laste inn siden på nytt?

For å endre URLen uten å laste opp websiden på nytt, bruk følgende JavaScript -forhåndsdefinerte metode:

• PushState () -metode
• erstatning () -metode

Metode 1: Endre nettadressen i JavaScript uten å laste inn siden ved å bruke "PushState ()" -metoden

For å endre nettadressen uten å laste opp websiden på nytt, bruk "Pushstate ()”Metode. Det er en funksjon eller den forhåndsdefinerte metoden for "Historieobjekt”Det gjør det mulig å endre nettleserhistorikken uten å navigere eller forfriskes på siden. Den legger bare til eller endrer historiestabelen og laster ikke en ny side. Ved å bruke denne tilnærmingen, kan du bytte frem og tilbake mellom sidene ved å legge til en ny oppføring til historiestabelen i nettleseren.

Syntaks
Følg den gitte syntaks for metoden “Pushstate ()”:

vindu.historie.Pushstate (State, Title, URL);

Her:

• “stat”Representerer den nye historieoppføringen.
• “tittel”Er den spesielle teksten som kan vises i nettleserens tittellinje.
• “URL”Angir den erstattede URL -en som en ny oppføring.

Eksempel
I en HTML -fil, lag fire knapper som kaller “modifyUrl ()”Funksjon på knappeklikk:

1
2
3
4

Definere en funksjon “modifyUrl ()”I en JavaScript -fil som vil utløse på knappeklikket. Det tar to parametere, "tittel" og "URL”. Når metoden blir kalt på knappeklikket, blir "tittelen" og "URL" bestått som argumenter. Sjekk typen "Pushstate”Av historieobjektet, hvis det ikke er“udefinert”. Deretter, ring "historie.Pushstate ()”Metode for å endre nettadressen:

funksjon modifyUrl (tittel, url)
if (typeof (historie.Pushstate) != "udefinert")
var obj =
Tittel: Tittel,
URL: URL
;
historie.Pushstate (obj, obj.Tittel, obj.URL);

Det kan sees at på hvert knappeklikk vil URL -en vellykket endres uten å laste inn siden:

I output ovenfor kan du se at bakpil -knappen øverst til venstre (<-) er aktivert mens du klikker på knappen, det indikerer at du kan navigere frem og tilbake fordi "Pushstate ()”Metode legger til den nye URL -en på historiestabelen.

Metode 2: Endre nettadressen i JavaScript uten å laste inn siden ved hjelp av "erstatning ()" -metoden

Bruke "erstatning ()”Metode for å endre nettadressen uten å laste opp websiden på nytt. Det er også et trekk ved "Historieobjekt”Men det vil ikke legge til en ny oppføring i historiestabelen. Det endrer den eksisterende tilstanden i nettleserens historie og erstatter den med en ny stat. Ved å bruke denne tilnærmingen kan du ikke bytte frem og tilbake mellom sidene.

Syntaks
Den gitte syntaks brukes til metoden “erstatning ()”:

vindu.historie.erstatning (tilstand, tittel, url);

Eksempel
I den definerte funksjonen, ring "erstatning ()”Metode for å erstatte URL -en på knappeklikk uten å laste inn eller navigere på siden:

funksjon modifyUrl (tittel, url)
if (typeof (historie.erstatning) != "udefinert")
var obj =
Tittel: Tittel,
URL: URL
;
historie.erstatning (obj, obj.Tittel, obj.URL);

Utgangen indikerer at på hver knapp klikk har URLen blitt endret, og det er ikke noe alternativ å navigere for å gå tilbake da bakpil -knappen er deaktivert:

Vi har gitt all den essensielle informasjonen som er relevant for modifisering av nettadressen uten å laste siden på nytt i JavaScript.

Konklusjon

For å endre/endre nettadressen uten å oppdatere websiden, bruk "Pushstate ()”Metode eller“erstatning ()”Metode. “PushState ()” -metode legger til den nye URL -en som en ny oppføring i en historiestabel og lar brukere navigere frem og tilbake. Mens metoden “erstatning ()” erstatter URL -en og ikke tillater å flytte til baksiden. Denne artikkelen beskrev metodene for å endre nettadressen uten å laste opp websiden på nytt ved hjelp av JavaScript.