Ta članek opisuje metode za spreminjanje URL-ja brez ponovnega nalaganja spletne strani z uporabo JavaScripta.
Kako spremeniti/spremeniti URL v JavaScriptu brez ponovnega nalaganja strani?
Če želite spremeniti URL brez ponovnega nalaganja spletne strani, uporabite naslednjo vnaprej določeno metodo JavaScript:
1. način: spremenite URL v JavaScriptu brez ponovnega nalaganja strani z uporabo metode »pushState()«
Če želite spremeniti URL brez ponovnega nalaganja spletne strani, uporabite » pushState() ” metoda. Je funkcija ali vnaprej določena metoda » zgodovina Objekt ”, ki omogoča spreminjanje zgodovine brskalnika brez navigacije ali osveževanja strani. Samo doda ali spremeni sklad zgodovine in ne naloži nove strani. S tem pristopom lahko preklapljate med stranmi in nazaj tako, da dodate nov vnos v sklad zgodovine brskalnika.
Sintaksa
Sledite dani sintaksi za metodo »pushState()«:
okno. zgodovina . pushState ( država , naslov , url ) ;
Tukaj:
- “ država ” predstavlja nov vnos v zgodovino.
- “ naslov ” je določeno besedilo, ki se lahko prikaže v naslovni vrstici brskalnika.
- “ url ” označuje zamenjani URL kot nov vnos.
Primer
V datoteki HTML ustvarite štiri gumbe, ki kličejo » modifyUrl() ” na klik gumba:
< gumb na klik = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 gumb >
< gumb na klik = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 gumb >
< gumb na klik = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 gumb >
Določite funkcijo ' modifyUrl() ” v datoteki JavaScript, ki se bo sprožila ob kliku gumba. Potrebuje dva parametra, ' naslov ' in ' url ”. Ko se metoda pokliče ob kliku gumba, bosta »naslov« in »url« posredovana kot argumenta. Preverite vrsto ' pushState ' zgodovinskega predmeta, če ni ' nedoločeno ”. Nato pokličite » history.pushState() ” za spremembo URL-ja:
funkcijo modifyUrl ( naslov , url ) {
če ( tip ( zgodovina. pushState ) != 'nedoločeno' ) {
je bil obj = {
Naslov : naslov ,
URL : url
} ;
zgodovina. pushState ( obj , obj. Naslov , obj. URL ) ;
}
}
Vidimo lahko, da bo ob vsakem kliku gumba URL uspešno spremenjen brez ponovnega nalaganja strani:
V zgornjem izhodu lahko vidite, da je gumb s puščico nazaj zgoraj levo ( <- ) je omogočen, ko kliknete gumb, pomeni, da se lahko pomikate naprej in nazaj, ker je » pushState() ” doda nov URL v sklad zgodovine.
2. način: spremenite URL v JavaScriptu brez ponovnega nalaganja strani z uporabo metode »replaceState()«
Uporabi ' zamenjaj stanje() ” za spreminjanje URL-ja brez ponovnega nalaganja spletne strani. To je tudi značilnost » zgodovina Objekt «, vendar ne bo dodal novega vnosa v sklad zgodovine. Spremeni obstoječe stanje zgodovine brskalnika in ga nadomesti z novim stanjem. S tem pristopom ne morete preklapljati med stranmi in nazaj.
Sintaksa
Dana sintaksa se uporablja za metodo »replaceState()«:
Primer
V definirani funkciji pokličite » zamenjaj stanje() ” za zamenjavo URL-ja ob kliku gumba brez ponovnega nalaganja ali krmarjenja po strani:
če ( tip ( zgodovina. replaceState ) != 'nedoločeno' ) {
je bil obj = {
Naslov : naslov ,
URL : url
} ;
zgodovina. replaceState ( obj , obj. Naslov , obj. URL ) ;
}
}
Izhod kaže, da je bil URL ob vsakem kliku gumba spremenjen in ni možnosti za navigacijo, da bi se vrnili nazaj, saj je gumb s puščico nazaj onemogočen:
Zagotovili smo vse bistvene informacije, pomembne za spremembo URL-ja brez ponovnega nalaganja strani v JavaScriptu.
Zaključek
Če želite spremeniti URL brez osveževanja spletne strani, uporabite » pushState() ' metoda ali ' zamenjaj stanje() ” metoda. Metoda »pushState()« doda nov URL kot nov vnos v sklad zgodovine in uporabnikom omogoča navigacijo naprej in nazaj. Medtem ko metoda »replaceState()« nadomesti URL in ne dovoljuje premikanja na zadnjo stran. Ta članek opisuje metode za spreminjanje URL-ja brez ponovnega nalaganja spletne strani z uporabo JavaScripta.