Selles artiklis kirjeldatakse meetodeid URL-i muutmiseks ilma veebilehte JavaScripti abil uuesti laadimata.
Kuidas muuta/muuta URL-i JavaScriptis ilma lehte uuesti laadimata?
URL-i muutmiseks ilma veebilehte uuesti laadimata kasutage järgmist JavaScripti eelmääratletud meetodit:
1. meetod: muutke URL-i JavaScriptis ilma lehte uuesti laadimata, kasutades meetodit 'pushState()'
URL-i muutmiseks ilma veebilehte uuesti laadimata kasutage ' pushState() ” meetod. See on funktsioon või eelmääratletud meetod ajaloo objekt ”, mis võimaldab muuta brauseri ajalugu ilma lehel navigeerimata või värskendamata. See lihtsalt lisab või muudab ajaloo virna ega laadi uut lehte. Seda lähenemisviisi kasutades saate lehtede vahel edasi-tagasi liikuda, lisades brauseri ajaloovirnasse uue kirje.
Süntaks
Järgige meetodi „pushState()” etteantud süntaksit:
aken. ajalugu . pushState ( olek , pealkiri , url ) ;
Siin:
- “ olek ” tähistab uut ajalookirjet.
- “ pealkiri ” on konkreetne tekst, mida saab näidata brauseri tiitliribal.
- “ url ” tähistab asendatud URL-i uue kirjena.
Näide
Looge HTML-failis neli nuppu, mis kutsuvad modifyUrl() ” funktsioon nupu klõpsamisel:
< nupp onclick = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 nuppu >
< nupp onclick = 'modifyUrl('JavaScripti õpetus', 'JavaScriptTutorial.html');' > 3 nuppu >
< nupp onclick = 'modifyUrl('Java õpetus', 'JavaTutorial.html');' > 4 nuppu >
Määratlege funktsioon ' modifyUrl() ” JavaScript-failis, mis käivitab nupu klõpsamise. Selleks on vaja kahte parameetrit, ' pealkiri ' ja ' url ”. Kui nupul klõpsamisel meetodit kutsutakse, edastatakse argumentidena 'title' ja 'url'. Kontrollige 'tüüpi' pushState ' ajalooobjektist, kui see ei ole ' määratlemata ”. Seejärel helistage ' history.pushState() ” meetod URL-i muutmiseks:
funktsiooni modifyUrl ( pealkiri , url ) {
kui ( tüüp ( ajalugu. pushState ) != 'määratlemata' ) {
oli obj = {
Pealkiri : pealkiri ,
URL : url
} ;
ajalugu. pushState ( obj , obj. Pealkiri , obj. URL ) ;
}
}
On näha, et igal nupul klõpsamisel muudetakse URL-i edukalt ilma lehte uuesti laadimata:
Ülaltoodud väljundis näete, et vasakus ülanurgas olev tagasinoolenupp ( <- ) on nupul klõpsamise ajal lubatud, näitab see, et saate edasi-tagasi navigeerida, kuna ' pushState() ” lisab uue URL-i ajaloovirna.
2. meetod: muutke URL-i JavaScriptis ilma lehte uuesti laadimata, kasutades meetodit „replaceState()”
Kasuta ' asenda olek() ” meetod URL-i muutmiseks ilma veebilehte uuesti laadimata. See on ka ' ajaloo objekt ”, kuid see ei lisa ajaloovirna uut kirjet. See muudab brauseri ajaloo olemasolevat olekut ja asendab selle uue olekuga. Seda lähenemisviisi kasutades ei saa te lehtede vahel edasi-tagasi liikuda.
Süntaks
Antud süntaksit kasutatakse meetodi 'replaceState()' jaoks:
Näide
Määratletud funktsioonis helistage ' asenda olek() ” meetod nupul klõpsamise URL-i asendamiseks ilma uuesti laadimata või lehel navigeerimata:
kui ( tüüp ( ajalugu. asendusriik ) != 'määratlemata' ) {
oli obj = {
Pealkiri : pealkiri ,
URL : url
} ;
ajalugu. asendusriik ( obj , obj. Pealkiri , obj. URL ) ;
}
}
Väljund näitab, et iga nupu klõpsu korral on URL-i muudetud ja tagasiminekuks pole võimalust navigeerida, kuna tagasinoole nupp on keelatud:
Oleme esitanud kogu olulise teabe, mis on seotud URL-i muutmisega, ilma lehte JavaScriptis uuesti laadimata.
Järeldus
URL-i muutmiseks/muutmiseks ilma veebilehte värskendamata kasutage ' pushState() ' meetod või ' asenda olek() ” meetod. Meetod 'pushState()' lisab uue URL-i ajaloovirna uue kirjena ja võimaldab kasutajatel edasi-tagasi navigeerida. Kuigi meetod 'replaceState()' asendab URL-i ega võimalda liikuda tagalehele. Selles artiklis kirjeldati URL-i muutmise meetodeid ilma veebilehte JavaScripti abil uuesti laadimata.