Canviar l'URL de manera dinàmica amb JavaScript
Quan treballeu amb aplicacions web modernes, és possible que hàgiu de modificar l'URL sense activar una recàrrega de la pàgina. Això pot ser especialment útil per crear una experiència d'usuari perfecta.
En aquesta guia, explorarem mètodes per canviar la part de l'URL després del domini, incloses tècniques que us permeten accedir a la part abans del símbol hash (#). Això garanteix el compliment de les polítiques entre dominis alhora que s'aconsegueix la modificació de l'URL desitjada.
| Comandament | Descripció |
|---|---|
| history.pushState() | Afegeix una nova entrada a la pila d'historial de sessions del navegador, canviant l'URL sense tornar a carregar la pàgina. |
| window.history.pushState() | Actualitza l'entrada de l'historial actual amb dades d'estat noves i un URL nou. |
| window.location.hash | Obté o estableix la part d'ancoratge de l'URL, que segueix el símbol hash (#). |
| function changeURL(newPath) | Defineix una funció que actualitza el camí de l'URL mitjançant l'API History. |
| function updateHash(newHash) | Defineix una funció que actualitza l'URL hash. |
Explicació detallada de la modificació d'URL en JavaScript
El primer script utilitza el history.pushState() mètode, que forma part de l'API History. Aquesta ordre permet als desenvolupadors afegir una nova entrada a la pila d'historial de sessions del navegador, canviant efectivament l'URL que es mostra a la barra d'adreces sense tornar a carregar la pàgina. En el guió, const newURL = "/page2.php"; marca el nou camí, i history.pushState(null, "", newURL); canvia l'URL a aquest camí nou. En embolicar el history.pushState comanda en una funció com function changeURL(newPath), podem actualitzar dinàmicament l'URL segons sigui necessari. Aquesta tècnica és especialment útil per a aplicacions d'una sola pàgina (SPA) on el contingut canvia dinàmicament sense tornar a carregar tota la pàgina.
El segon script aborda el canvi de l'URL hash utilitzant window.location.hash. Aquesta propietat obté o estableix la part d'ancoratge de l'URL que segueix el símbol hash (#). Per fixació const hashValue = "newSection"; i window.location.hash = hashValue;, l'URL hash canvia a #newSection sense tornar a carregar la pàgina. Aquest enfocament és útil per navegar per la mateixa pàgina o enllaçar a seccions específiques d'un document. A més, la funció function updateHash(newHash) encapsula aquesta funcionalitat, facilitant el canvi dinàmic de la part hash de l'URL. Tots dos scripts ofereixen maneres senzilles de modificar l'URL i millorar l'experiència de l'usuari evitant recàrregues de pàgines innecessàries.
Ús de l'API de l'historial per canviar l'URL sense tornar a carregar
JavaScript amb l'API History
const newURL = "/page2.php";history.pushState(null, "", newURL);// This changes the URL to /page2.php without reloading the pagefunction changeURL(newPath) {window.history.pushState({}, "", newPath);}// Example usagechangeURL("/page2.php");
Manipulació de l'URL hash sense tornar a carregar
JavaScript per modificar el hash
const hashValue = "newSection";window.location.hash = hashValue;// This changes the URL hash to #newSectionfunction updateHash(newHash) {window.location.hash = newHash;}// Example usageupdateHash("newSection");
Explorant mètodes addicionals per modificar l'URL sense tornar a carregar
Un altre aspecte de la modificació de l'URL sense tornar a carregar la pàgina implica l'ús de replaceState() mètode de l'API History. Mentre pushState() afegeix una nova entrada d'historial, replaceState() modifica l'entrada de l'historial actual. Això pot ser especialment útil quan voleu canviar l'URL sense desordenar l'historial de l'usuari amb diversos estats. Per exemple, si teniu una aplicació d'una sola pàgina on el contingut canvia amb freqüència, és possible que vulgueu actualitzar l'URL perquè reflecteixi l'estat actual sense afegir cada canvi a l'historial. Això manté la funcionalitat del botó enrere neta i fàcil d'utilitzar.
Usar replaceState(), podeu escriure una funció semblant a changeURL() però en canvi truca history.replaceState() dins d'ella. Per exemple, function replaceURL(newPath) podria utilitzar history.replaceState(null, "", newPath); per actualitzar l'URL. Aquesta tècnica és valuosa per millorar l'experiència de l'usuari mantenint l'URL sincronitzat amb l'estat de l'aplicació sense crear entrades d'historial innecessàries. A més, ofereix una manera més eficient de gestionar l'historial del navegador, especialment en aplicacions web dinàmiques.
Preguntes habituals sobre la modificació d'URL sense tornar a carregar
- Quina és la diferència entre pushState() i replaceState()?
- pushState() afegeix una nova entrada a la pila d'historial de sessions, mentre que replaceState() modifica l'entrada de l'historial actual.
- Puc canviar l'URL hash sense tornar a carregar la pàgina?
- Sí, utilitzant window.location.hash, podeu canviar l'URL hash sense tornar a carregar la pàgina.
- És possible modificar només els paràmetres de consulta de l'URL?
- Sí, podeu actualitzar els paràmetres de consulta utilitzant pushState() o replaceState() mètodes sense tornar a carregar la pàgina.
- Es modifica l'URL amb pushState() afecta el botó enrere?
- Sí, cada trucada a pushState() crea una nova entrada de l'historial, de manera que el botó enrere navegarà per aquests estats.
- Puc utilitzar aquests mètodes en tots els navegadors?
- La majoria dels navegadors moderns admeten l'API History, inclòs pushState() i replaceState(), però sempre comproveu la compatibilitat.
- Com puc gestionar els esdeveniments popstate quan l'utilitzo pushState()?
- Podeu escoltar el popstate esdeveniment per gestionar els canvis a l'entrada de l'historial actiu i actualitzar la interfície d'usuari en conseqüència.
- Què passa si el format d'URL és incorrecte quan s'utilitza? pushState()?
- Si el format de l'URL és incorrecte, pushState() generarà un error, així que assegureu-vos que els vostres URL estiguin formatats correctament.
Tancant el tema
Modificar l'URL sense tornar a carregar la pàgina en JavaScript pot millorar considerablement l'experiència de l'usuari creant una navegació més suau i evitant recàrregues innecessàries de la pàgina. Utilitzant l'API History pushState() i replaceState() Els mètodes permeten als desenvolupadors actualitzar l'URL de manera dinàmica, mantenint l'estat de l'aplicació sincronitzat sense desordenar l'historial del navegador. A més, manipular l'URL hash pot proporcionar una navegació eficient a la pàgina. Entendre i implementar aquestes tècniques és essencial per desenvolupar aplicacions web modernes i sensibles.