Questo articolo descriverà i metodi per modificare l'URL senza ricaricare la pagina Web utilizzando JavaScript.
Come modificare/cambiare l'URL in JavaScript senza ricaricare la pagina?
Per modificare l'URL senza ricaricare la pagina Web, utilizzare il seguente metodo predefinito JavaScript:
Metodo 1: modifica l'URL in JavaScript senza ricaricare la pagina utilizzando il metodo 'pushState ()'.
Per modificare l'URL senza ricaricare la pagina Web, utilizzare il ' pushStato() ' metodo. È una caratteristica o il metodo predefinito del ' storia Oggetto ” che consente di modificare la cronologia del browser senza navigare o aggiornare la pagina. Aggiunge o modifica semplicemente lo stack della cronologia e non carica una nuova pagina. Utilizzando questo approccio, puoi passare da una pagina all'altra aggiungendo una nuova voce allo stack della cronologia del browser.
Sintassi
Segui la sintassi data per il metodo 'pushState()':
finestra. storia . pushState ( stato , titolo , URL ) ;
Qui:
- “ stato ” rappresenta la nuova voce della cronologia.
- “ titolo ” è il particolare testo che può essere visualizzato nella barra del titolo del browser.
- “ URL ” indica l'URL sostituito come nuova voce.
Esempio
In un file HTML, crea quattro pulsanti che chiamano ' modificaUrl() ” funzione sul pulsante clic:
< pulsante al clic = 'modifyUrl('Tutorial CSS', 'CSSTutorial.html');' > 2 pulsante >
< pulsante al clic = 'modifyUrl('Tutorial JavaScript', 'Tutorial JavaScript.html');' > 3 pulsante >
< pulsante al clic = 'modifyUrl('Tutorial Java', 'Tutorial Java.html');' > 4 pulsante >
Definire una funzione ' modificaUrl() ” in un file JavaScript che si attiverà al clic del pulsante. Ci vogliono due parametri, il ' titolo ' e il ' URL ”. Quando il metodo viene chiamato al clic del pulsante, il 'titolo' e l''url' verranno passati come argomenti. Controlla il tipo di ' pushState ” dell'oggetto storico, se non lo è “ non definito ”. Quindi, chiama il ' storia.pushState() ” metodo per modificare l'URL:
funzione modificaUrl ( titolo , URL ) {
Se ( tipo di ( storia. pushState ) != 'non definito' ) {
era ogg = {
Titolo : titolo ,
Url : URL
} ;
storia. pushState ( ogg , ogg. Titolo , ogg. Url ) ;
}
}
Si può vedere che ad ogni clic del pulsante, l'URL verrà modificato correttamente senza ricaricare la pagina:
Nell'output sopra, puoi vedere che il pulsante freccia indietro in alto a sinistra ( <- ) è abilitato mentre si fa clic sul pulsante, indica che è possibile navigare avanti e indietro perché il ' pushStato() ” aggiunge il nuovo URL nello stack della cronologia.
Metodo 2: modifica l'URL in JavaScript senza ricaricare la pagina utilizzando il metodo 'replaceState ()'.
Usa il ' sostituisciStato() ” metodo per modificare l'URL senza ricaricare la pagina web. È anche una caratteristica del “ storia Oggetto ” ma non aggiungerà una nuova voce allo stack della cronologia. Cambia lo stato esistente della cronologia del browser e lo sostituisce con un nuovo stato. Utilizzando questo approccio, non è possibile passare da una pagina all'altra.
Sintassi
La sintassi data è utilizzata per il metodo “replaceState()”:
Esempio
Nella funzione definita, chiama ' sostituisciStato() ” metodo per sostituire l'URL al clic del pulsante senza ricaricare o navigare nella pagina:
Se ( tipo di ( storia. sostituireStato ) != 'non definito' ) {
era ogg = {
Titolo : titolo ,
Url : URL
} ;
storia. sostituireStato ( ogg , ogg. Titolo , ogg. Url ) ;
}
}
L'output indica che a ogni clic del pulsante, l'URL è stato modificato e non è disponibile alcuna opzione per tornare indietro poiché il pulsante freccia indietro è disabilitato:
Abbiamo fornito tutte le informazioni essenziali relative alla modifica dell'URL senza ricaricare la pagina in JavaScript.
Conclusione
Per modificare/cambiare l'URL senza aggiornare la pagina Web, utilizzare il ' pushStato() ” metodo o il “ sostituisciStato() ' metodo. Il metodo 'pushState ()' aggiunge il nuovo URL come nuova voce in uno stack della cronologia e consente agli utenti di navigare avanti e indietro. Mentre il metodo 'replaceState ()' sostituisce l'URL e non consente di passare alla pagina posteriore. Questo articolo ha descritto i metodi per modificare l'URL senza ricaricare la pagina Web utilizzando JavaScript.