Tento článek popisuje metody pro úpravu adresy URL bez opětovného načítání webové stránky pomocí JavaScriptu.
Jak upravit/změnit URL v JavaScriptu bez opětovného načtení stránky?
Chcete-li upravit adresu URL bez opětovného načtení webové stránky, použijte následující předdefinovanou metodu JavaScriptu:
Metoda 1: Upravte adresu URL v JavaScriptu bez opětovného načtení stránky pomocí metody „pushState()“.
Chcete-li upravit adresu URL bez opětovného načítání webové stránky, použijte „ pushState() “ metoda. Je to vlastnost nebo předdefinovaná metoda „ historie Objekt “, který umožňuje změnu historie prohlížeče bez navigace nebo obnovování stránky. Pouze přidá nebo upraví zásobník historie a nenačte novou stránku. Pomocí tohoto přístupu můžete přepínat tam a zpět mezi stránkami přidáním nové položky do zásobníku historie prohlížeče.
Syntax
Postupujte podle dané syntaxe pro metodu „pushState()“:
okno. Dějiny . pushState ( Stát , titul , url ) ;
Tady:
- “ Stát “ představuje nový záznam historie.
- “ titul “ je konkrétní text, který lze zobrazit v záhlaví prohlížeče.
- “ url “ označuje nahrazenou adresu URL jako nový záznam.
Příklad
V souboru HTML vytvořte čtyři tlačítka, která volají „ upravitUrl() ” funkce po kliknutí na tlačítko:
< tlačítko onclick = 'modifyUrl('Výukový program CSS', 'CSSTutorial.html');' > 2 knoflík >
< tlačítko onclick = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 knoflík >
< tlačítko onclick = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 knoflík >
Definujte funkci ' upravitUrl() ” v souboru JavaScript, který se spustí po kliknutí na tlačítko. Vyžaduje dva parametry, „ titul “ a „ url “. Když je metoda volána po kliknutí na tlačítko, „název“ a „url“ budou předány jako argumenty. Zkontrolujte typ „ pushState “ objektu historie, pokud to není “ nedefinováno “. Poté zavolejte na „ history.pushState() ” metoda pro změnu adresy URL:
funkce upravitUrl ( titul , url ) {
-li ( Typ ( Dějiny. pushState ) != 'nedefinováno' ) {
byl obj = {
Titul : titul ,
URL : url
} ;
Dějiny. pushState ( obj , obj. Titul , obj. URL ) ;
}
}
Je vidět, že při každém kliknutí na tlačítko bude adresa URL úspěšně změněna bez opětovného načtení stránky:
Ve výše uvedeném výstupu můžete vidět, že tlačítko se šipkou zpět vlevo nahoře ( <- ) je povolena při kliknutí na tlačítko, znamená to, že můžete procházet tam a zpět, protože „ pushState() “ přidá novou adresu URL do zásobníku historie.
Metoda 2: Upravte adresu URL v JavaScriptu bez opětovného načtení stránky pomocí metody „replaceState()“.
Použijte „ nahraditState() ” metoda pro úpravu adresy URL bez opětovného načítání webové stránky. Je to také vlastnost „ historie Objekt “, ale nepřidá novou položku do zásobníku historie. Změní stávající stav historie prohlížeče a nahradí jej novým stavem. Pomocí tohoto přístupu nemůžete přepínat tam a zpět mezi stránkami.
Syntax
Daná syntaxe se používá pro metodu „replaceState()“:
Příklad
V definované funkci zavolejte „ nahraditState() ” metoda k nahrazení adresy URL po kliknutí na tlačítko bez opětovného načítání nebo procházení stránky:
-li ( Typ ( Dějiny. nahraditState ) != 'nedefinováno' ) {
byl obj = {
Titul : titul ,
URL : url
} ;
Dějiny. nahraditState ( obj , obj. Titul , obj. URL ) ;
}
}
Výstup ukazuje, že při každém kliknutí na tlačítko se adresa URL změnila a neexistuje žádná možnost navigace a návratu, protože tlačítko se šipkou zpět je deaktivováno:
Poskytli jsme všechny podstatné informace relevantní pro úpravu adresy URL bez opětovného načítání stránky v JavaScriptu.
Závěr
Chcete-li upravit/změnit adresu URL bez obnovení webové stránky, použijte „ pushState() “ metoda nebo “ nahraditState() “ metoda. Metoda „pushState()“ přidá novou adresu URL jako nový záznam do zásobníku historie a umožňuje uživatelům procházet tam a zpět. Zatímco metoda „replaceState()“ nahrazuje URL a neumožňuje přesun na zadní stránku. Tento článek popisuje způsoby úpravy adresy URL bez opětovného načítání webové stránky pomocí JavaScriptu.