Acest articol va descrie metodele de modificare a adresei URL fără a reîncărca pagina web folosind JavaScript.
Cum să modificați/modificați adresa URL în JavaScript fără a reîncărca pagina?
Pentru a modifica adresa URL fără a reîncărca pagina web, utilizați următoarea metodă predefinită JavaScript:
Metoda 1: Modificați adresa URL în JavaScript fără a reîncărca pagina folosind metoda „pushState()”
Pentru a modifica adresa URL fără a reîncărca pagina web, utilizați „ pushState() ” metoda. Este o caracteristică sau metoda predefinită a „ istorie Obiect ” care permite modificarea istoricului browserului fără a naviga sau reîmprospăta pagina. Pur și simplu adaugă sau modifică stiva de istoric și nu încarcă o pagină nouă. Folosind această abordare, puteți comuta înainte și înapoi între pagini adăugând o nouă intrare la stiva de istoric a browserului.
Sintaxă
Urmați sintaxa dată pentru metoda „pushState()”:
fereastră. istorie . pushState ( stat , titlu , url ) ;
Aici:
- „ stat ” reprezintă noua intrare în istorie.
- „ titlu ” este textul particular care poate fi afișat în bara de titlu a browserului.
- „ url ” indică adresa URL înlocuită ca o nouă intrare.
Exemplu
Într-un fișier HTML, creați patru butoane care numesc „ modifyUrl() ” pe butonul clic:
< butonul la clic = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 buton >
< butonul la clic = 'modifyUrl('Tutorial JavaScript', 'JavaScriptTutorial.html');' > 3 buton >
< butonul la clic = 'modifyUrl('Tutorial Java', 'JavaTutorial.html');' > 4 buton >
Definiți o funcție „ modifyUrl() ” într-un fișier JavaScript care se va declanșa la clic pe buton. Este nevoie de doi parametri, „ titlu ' si ' url ”. Când metoda este apelată la clic pe butonul, „titlul” și „url-ul” vor fi transmise ca argumente. Verificați tipul „ pushState ” a obiectului de istorie, dacă nu este ” nedefinit ”. Apoi, sunați „ history.pushState() ” metoda de modificare a adresei URL:
funcţie modifyUrl ( titlu , url ) {
dacă ( tip de ( istorie. pushState ) != 'nedefinit' ) {
a fost obj = {
Titlu : titlu ,
Url : url
} ;
istorie. pushState ( obj , obj. Titlu , obj. Url ) ;
}
}
Se poate observa că la fiecare clic pe buton, adresa URL va fi schimbată cu succes fără a reîncărca pagina:
În rezultatul de mai sus, puteți vedea că butonul săgeată înapoi din stânga sus ( <- ) este activat în timp ce faceți clic pe butonul, indică faptul că puteți naviga înainte și înapoi, deoarece „ pushState() ” adaugă noua adresă URL pe stiva de istoric.
Metoda 2: Modificați adresa URL în JavaScript fără a reîncărca pagina folosind metoda „replaceState()”
Folosește ' replaceState() ” metoda de modificare a adresei URL fără a reîncărca pagina web. Este, de asemenea, o caracteristică a „ istorie Obiect ” dar nu va adăuga o nouă intrare în stiva de istorie. Schimbă starea existentă a istoricului browserului și o înlocuiește cu o stare nouă. Folosind această abordare, nu puteți comuta înainte și înapoi între pagini.
Sintaxă
Sintaxa dată este utilizată pentru metoda „replaceState()”:
Exemplu
În funcția definită, apelați „ replaceState() ” metoda de a înlocui adresa URL pe butonul faceți clic fără a reîncărca sau a naviga pe pagină:
dacă ( tip de ( istorie. replaceState ) != 'nedefinit' ) {
a fost obj = {
Titlu : titlu ,
Url : url
} ;
istorie. replaceState ( obj , obj. Titlu , obj. Url ) ;
}
}
Rezultatul indică faptul că la fiecare clic pe buton, adresa URL a fost schimbată și nu există nicio opțiune de navigare pentru a reveni, deoarece butonul săgeată înapoi este dezactivat:
Am furnizat toate informațiile esențiale relevante pentru modificarea URL-ului fără a reîncărca pagina în JavaScript.
Concluzie
Pentru a modifica/schimba adresa URL fără a reîmprospăta pagina web, utilizați „ pushState() ” sau metoda ” replaceState() ” metoda. Metoda „pushState()” adaugă noua adresă URL ca o nouă intrare într-o stivă de istoric și permite utilizatorilor să navigheze înainte și înapoi. În timp ce metoda „replaceState()” înlocuiește adresa URL și nu permite trecerea la pagina din spate. Acest articol a descris metodele de modificare a adresei URL fără a reîncărca pagina web folosind JavaScript.