Šiame straipsnyje bus aprašyti būdai, kaip pakeisti URL iš naujo neįkeliant tinklalapio naudojant „JavaScript“.
Kaip pakeisti / pakeisti URL „JavaScript“ neįkeliant puslapio iš naujo?
Norėdami pakeisti URL iš naujo neįkeldami tinklalapio, naudokite šį iš anksto nustatytą JavaScript metodą:
1 būdas: pakeiskite URL „JavaScript“ neįkeldami puslapio iš naujo naudodami „pushState()“ metodą
Norėdami pakeisti URL neįkeldami tinklalapio iš naujo, naudokite „ pushState () “ metodas. Tai funkcija arba iš anksto nustatytas metodas istorijos objektas “, kuri leidžia keisti naršyklės istoriją neperėjus ir neatnaujinant puslapio. Jis tiesiog prideda arba pakeičia istorijos krūvą ir neįkelia naujo puslapio. Naudodami šį metodą galite perjungti puslapius pirmyn ir atgal, įtraukdami naują įrašą į naršyklės istorijos krūvą.
Sintaksė
Laikykitės pateiktos „pushState()“ metodo sintaksės:
langas. istorija . pushState ( valstybė , titulą , url ) ;
Čia:
- “ valstybė “ reiškia naują istorijos įrašą.
- “ titulą “ yra konkretus tekstas, kuris gali būti rodomas naršyklės pavadinimo juostoje.
- “ url “ nurodo pakeistą URL kaip naują įrašą.
Pavyzdys
HTML faile sukurkite keturis mygtukus, kurie vadina „ modifikuotiUrl() “ funkcija ant mygtuko paspaudimo:
< mygtukas onclick = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 mygtuką >
< mygtukas onclick = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 mygtuką >
< mygtukas onclick = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 mygtuką >
Apibrėžkite funkciją ' modifikuotiUrl() “ JavaScript faile, kuris suaktyvins mygtuko paspaudimą. Tam reikia dviejų parametrų, „ titulą ' ir ' url “. Kai metodas iškviečiamas spustelėjus mygtuką, „pavadinimas“ ir „url“ bus perduoti kaip argumentai. Patikrinkite „“ tipą pushState istorijos objekto “, jei jis nėra “ neapibrėžtas “. Tada skambinkite „ history.pushState() “ būdas pakeisti URL:
funkcija modifikuotiUrl ( titulą , url ) {
jeigu ( tipas ( istorija. pushState ) != 'neapibrėžtas' ) {
buvo obj = {
Pavadinimas : titulą ,
URL : url
} ;
istorija. pushState ( obj , obj. Pavadinimas , obj. URL ) ;
}
}
Matyti, kad kiekvieną kartą spustelėjus mygtuką, URL bus sėkmingai pakeistas neįkeliant puslapio iš naujo:
Aukščiau pateiktame išvestyje galite pamatyti, kad viršutiniame kairiajame kampe esantis rodyklės atgal mygtukas ( <- ) yra įjungtas spustelėjus mygtuką, tai rodo, kad galite naršyti pirmyn ir atgal, nes „ pushState () “ metodas prideda naują URL į istorijos krūvą.
2 būdas: pakeiskite URL „JavaScript“ neįkeldami puslapio iš naujo naudodami „replaceState()“ metodą
Naudoti ' pakeisti būseną () “ metodas, skirtas pakeisti URL, neįkeliant tinklalapio iš naujo. Tai taip pat yra „ istorijos objektas “, tačiau jis nepridės naujo įrašo į istorijos krūvą. Tai pakeičia esamą naršyklės istorijos būseną ir pakeičia ją nauja. Naudodami šį metodą negalėsite perjungti puslapių pirmyn ir atgal.
Sintaksė
Nurodyta sintaksė naudojama „replaceState()“ metodui:
Pavyzdys
Apibrėžtoje funkcijoje skambinkite „ pakeisti būseną () “ metodą pakeisti URL ant mygtuko paspaudimo neįkeliant iš naujo arba neperžiūrint puslapio:
jeigu ( tipas ( istorija. pakeisti būseną ) != 'neapibrėžtas' ) {
buvo obj = {
Pavadinimas : titulą ,
URL : url
} ;
istorija. pakeisti būseną ( obj , obj. Pavadinimas , obj. URL ) ;
}
}
Išvestis rodo, kad kiekvieną kartą spustelėjus mygtuką, URL buvo pakeistas ir nėra galimybės naršyti grįžti atgal, nes rodyklės atgal mygtukas išjungtas:
Pateikėme visą esminę informaciją, susijusią su URL keitimu, neįkeldami puslapio iš naujo JavaScript.
Išvada
Norėdami pakeisti / pakeisti URL neatnaujindami tinklalapio, naudokite „ pushState () “ metodas arba „ pakeisti būseną () “ metodas. Metodas „pushState()“ prideda naują URL kaip naują įrašą istorijos krūvoje ir leidžia vartotojams naršyti pirmyn ir atgal. Nors metodas „replaceState()“ pakeičia URL ir neleidžia pereiti į galinį puslapį. Šiame straipsnyje aprašyti būdai, kaip pakeisti URL iš naujo neįkeliant tinklalapio naudojant „JavaScript“.