Tento článok popisuje spôsoby úpravy adresy URL bez opätovného načítania webovej stránky pomocou JavaScriptu.
Ako upraviť/zmeniť URL v JavaScripte bez opätovného načítania stránky?
Ak chcete upraviť adresu URL bez opätovného načítania webovej stránky, použite nasledujúcu preddefinovanú metódu JavaScript:
Metóda 1: Upravte adresu URL v jazyku JavaScript bez opätovného načítania stránky pomocou metódy „pushState()“.
Ak chcete upraviť URL bez opätovného načítania webovej stránky, použite „ pushState() “. Je to vlastnosť alebo preddefinovaná metóda „ história Objekt ” ktorý umožňuje meniť históriu prehliadača bez navigácie alebo obnovovania stránky. Len pridáva alebo upravuje zásobník histórie a nenačítava novú stránku. Pomocou tohto prístupu môžete prepínať tam a späť medzi stránkami pridaním novej položky do zásobníka histórie prehliadača.
Syntax
Postupujte podľa uvedenej syntaxe pre metódu „pushState()“:
okno. histórie . pushState ( štát , titul , url ) ;
Tu:
- “ štát “ predstavuje nový záznam histórie.
- “ titul “ je konkrétny text, ktorý sa môže zobraziť v záhlaví prehliadača.
- “ url “ označuje nahradenú adresu URL ako nový záznam.
Príklad
V súbore HTML vytvorte štyri tlačidlá, ktoré volajú „ upraviťUrl() ” funkcia po kliknutí na tlačidlo:
< tlačidlo onclick = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 tlačidlo >
< tlačidlo onclick = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 tlačidlo >
< tlačidlo onclick = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 tlačidlo >
Definujte funkciu ' upraviťUrl() ” v súbore JavaScript, ktorý sa spustí po kliknutí na tlačidlo. Vyžaduje si to dva parametre, „ titul “ a „ url “. Keď sa metóda zavolá po kliknutí na tlačidlo, „názov“ a „url“ budú odovzdané ako argumenty. Skontrolujte typ „ pushState “ objektu histórie, ak nie je “ nedefinované “. Potom zavolajte na „ history.pushState() ” metóda na zmenu adresy URL:
funkciu upraviťUrl ( titul , url ) {
ak ( Typ ( histórie. pushState ) != 'nedefinované' ) {
bol obj = {
Názov : titul ,
Url : url
} ;
histórie. pushState ( obj , obj. Názov , obj. Url ) ;
}
}
Je vidieť, že pri každom kliknutí na tlačidlo sa adresa URL úspešne zmení bez opätovného načítania stránky:
Vo vyššie uvedenom výstupe môžete vidieť, že tlačidlo šípky späť vľavo hore ( <- ) je povolená pri kliknutí na tlačidlo, znamená to, že sa môžete pohybovať tam a späť, pretože „ pushState() “ pridá novú adresu URL do zásobníka histórie.
Metóda 2: Upravte adresu URL v jazyku JavaScript bez opätovného načítania stránky pomocou metódy „replaceState()“.
Použi ' nahradiťState() ” metóda na úpravu adresy URL bez opätovného načítania webovej stránky. Je to tiež vlastnosť „ história Objekt “, ale nepridá nový záznam do zásobníka histórie. Zmení existujúci stav histórie prehliadača a nahradí ho novým stavom. Použitím tohto prístupu nemôžete prepínať tam a späť medzi stránkami.
Syntax
Daná syntax sa používa pre metódu „replaceState()“:
Príklad
V definovanej funkcii zavolajte „ nahradiťState() ” metóda na nahradenie adresy URL po kliknutí na tlačidlo bez opätovného načítania alebo navigácie na stránke:
ak ( Typ ( histórie. nahradiťState ) != 'nedefinované' ) {
bol obj = {
Názov : titul ,
Url : url
} ;
histórie. nahradiťState ( obj , obj. Názov , obj. Url ) ;
}
}
Výstup naznačuje, že pri každom kliknutí na tlačidlo sa adresa URL zmenila a nie je možné prejsť späť, pretože tlačidlo so šípkou späť je vypnuté:
Poskytli sme všetky podstatné informácie relevantné pre úpravu URL bez opätovného načítania stránky v JavaScripte.
Záver
Ak chcete upraviť/zmeniť URL bez obnovovania webovej stránky, použite „ pushState() “ metóda alebo “ nahradiťState() “. Metóda „pushState()“ pridáva novú adresu URL ako nový záznam do zásobníka histórie a umožňuje používateľom navigovať tam a späť. Metóda „replaceState()“ nahrádza URL a neumožňuje presun na zadnú stranu. Tento článok popisuje spôsoby úpravy adresy URL bez opätovného načítania webovej stránky pomocou JavaScriptu.