Get it on Google Play
Tu partner Freelance para tus proyectos IT

Desarrollo frontend: Detectar cambios en la URL

02-10-2020
Anatomía de una URL

Anatomía de una URL

Las aplicaciones web modernas, tanto si se trata de un portal corporativo como un CRM, ya no recargan la página entera cada vez que el usuario hace click en un enlace. A veces resulta imperceptible, pero impacta y mucho, en la experiencia de usuario.

Se trata de cargar por ajax una parte o la totalidad de la página pero manteniendo la funcionalidad del historial de navegación(Que también es muy importante para la experiencia de usuario).

Básicamente tenemos que contemplar dos escenarios:

Detectar cambios en la URL a partir del símbolo hash o fragmento

Si solo nos interesa capturar cuando cambia la URL después del símbolo ‘#'(Lo que se conoce como fragmento) es tan fácil como capturar el evento por Javascript:

 
window.onhashchange = function() { 
    	reloadContent();  
	}

function reloadContent() {
	var url = (""+window.location).split('#');
	if ( url.length<2 ) url=""; else url=url[1];

	alert( 'Aquí la lógica de cargar '+url );
	}

Como vemos es muy fácil.

Detectar cambios en la URL

Cuando lo que deseamos es detectar cambios en la URL entera(O por lo menos el path) lo que tenemos que hacer es trabajarnos un poco mas el proceso.

Básicamente, se trata de capturar el evento antes de que el navegador empiece el proceso de cargar la página y cargar la URL en el histórico del navegador y la barra de dirección(Sin cargar la página completa) a través del objeto ‘history’ y el método ‘pushState’. Después nosotros hacemos el proceso de cargar.

<script>
			window.addEventListener('popstate', function (event) {
				var stateObj = event.state;

				/* Cargar página a partir de los datos de stateObj */
				});

			function changePage(el, event) {
				event.preventDefault();

				var stateObj = { datos: ""+el.href };
				history.pushState(stateObj, "Título", ""+el.href);

				/* Cargar página a partir de los datos de stateObj */
				}
		</script>
		<p>
			<a href='/pag1.html' onclick='javascript: changePage(this, event);'>Link1</a>
		</p>
		<p>
			<a href='/pag2.html' onclick='javascript: changePage(this, event);'>Link2</a>
		</p>

En el ejemplo capturamos el evento ‘onclick’ para cargar los datos de la página. También capturamos el evento ‘popstate’ para cargar los datos de la página cuando el usuario hace click hacia atrás o hacia adelante con el navegador.

Por cierto, el mismo objeto ‘history’ nos permite ir haca atrás y hacia adelante con el método ‘go’. Por ejemplo, ‘history.go(-1);’.

Si te ha servido, por favor comparte
 

Leave a Reply