Come modificare l'URL in JavaScript senza ricaricare la pagina

Modificare l'URL senza ricaricare la pagina può essere una strategia molto utile per la creazione di siti Web più eccitanti e dinamici utilizzando JavaScript. Ad esempio, la creazione di un sito Web singolo in cui l'utente interagisce con porzioni/sezioni diverse del sito Web senza navigare/reindirizzamento in una nuova pagina è un caso d'uso comune per modificare l'URL senza ricaricare la pagina. Ciò può comportare un'esperienza utente più coerente e reattiva.

Questo articolo descriverà i metodi per modificare l'URL senza ricaricare la pagina Web usando JavaScript.

Come modificare/modificare l'URL in JavaScript senza ricaricare la pagina?

Per modificare l'URL senza ricaricare la pagina Web, utilizzare il seguente metodo predefinito JavaScript:

• Metodo PushState ()
• Metodo sostitutivo ()

Metodo 1: modificare l'URL in JavaScript senza ricaricare la pagina usando il metodo "PushState ()"

Per modificare l'URL senza ricaricare la pagina Web, utilizzare "PushState ()" metodo. È una caratteristica o il metodo predefinito di "Oggetto di cronologia"Ciò consente di modificare la cronologia del browser senza navigare o aggiornare la pagina. Aggiunge o modifica solo lo stack di cronologia e non carica una nuova pagina. Usando questo approccio, è possibile passare avanti e indietro tra le pagine aggiungendo una nuova voce alla cronologia del browser.

Sintassi
Seguire la sintassi data per il metodo "PushState ()":

finestra.storia.PushState (Stato, titolo, URL);

Qui:

• "stato"Rappresenta la nuova voce di cronologia.
• "titolo"È il testo particolare che può essere mostrato nella barra del titolo del browser.
• "URL"Indica l'URL sostituito come una nuova voce.

Esempio
In un file HTML, crea quattro pulsanti che chiamano "ModifyIrl ()"Funzione sul pulsante Clicca:

1
2
3
4

Definire una funzione "ModifyIrl ()"In un file JavaScript che attiverà il clic del pulsante. Ci vogliono due parametri, il "titolo" e il "URL". Quando il metodo viene chiamato sul clic del pulsante, il "titolo" e "URL" verranno passati come argomenti. Controlla il tipo di "Pushstate"Dell'oggetto cronologia, se non lo è"non definito". Quindi, chiama il "storia.PushState ()"Metodo per cambiare l'URL:

funzione ModifyIrl (title, url)
if (typeof (cronologia.pushstate) != "Undefined")
var obj =
Titolo: titolo,
URL: URL
;
storia.PushState (OBJ, OBJ.Titolo, OBJ.URL);

Si può vedere che su ogni pulsante clic, l'URL verrà modificato correttamente senza ricaricare la pagina:

Nell'uscita sopra, puoi vedere che il pulsante freccia posteriore in alto a sinistra (<-) è abilitato mentre si fa clic sul pulsante, indica che è possibile navigare avanti e indietro perché "PushState ()"Il metodo aggiunge il nuovo URL nello stack della cronologia.

Metodo 2: modificare l'URL in JavaScript senza ricaricare la pagina usando il metodo "sostituzione ()"

Usa il "sostituto ()"Metodo per modificare l'URL senza ricaricare la pagina Web. È anche una caratteristica di "Oggetto di cronologia"Ma non aggiungerà una nuova voce allo stack di cronologia. Cambia lo stato esistente della storia del browser e lo sostituisce con un nuovo stato. Usando questo approccio, non è possibile passare avanti e indietro tra le pagine.

Sintassi
La sintassi data viene utilizzata per il metodo "sostituzione ()":

finestra.storia.sostituzione (stato, titolo, URL);

Esempio
Nella funzione definita, chiamare "sostituto ()"Metodo per sostituire l'URL sul clic del pulsante senza ricaricare o navigare la pagina:

funzione ModifyIrl (title, url)
if (typeof (cronologia.sostituto) != "Undefined")
var obj =
Titolo: titolo,
URL: URL
;
storia.sostituire (obj, obj.Titolo, OBJ.URL);

L'output indica che su ogni pulsante di clic, l'URL è stato modificato e non esiste alcuna opzione per tornare indietro per tornare indietro poiché il pulsante freccia posteriore è disabilitato:

Abbiamo fornito tutte le informazioni essenziali pertinenti alla modifica dell'URL senza ricaricare la pagina in JavaScript.

Conclusione

Per modificare/modificare l'URL senza rinfrescare la pagina Web, utilizzare "PushState ()Metodo o il "sostituto ()" metodo. Il metodo "PushState ()" aggiunge il nuovo URL come una nuova voce in uno stack di cronologia e consente agli utenti di navigare avanti e indietro. Mentre il metodo "sostituzione ()" sostituisce l'URL e non consente di spostarsi sulla pagina posteriore. Questo articolo ha descritto i metodi per modificare l'URL senza ricaricare la pagina Web utilizzando JavaScript.