HTML 5 hashchange event

in HTML 5 on by Gisela Torres

Cada vez está más de moda crear aplicaciones orientadas a SPA (Single Page Applications), lo cual significa que las recargas parciales de la página, la simulación de un cambio de vista, etcétera están a la orden del día.

Una forma de alertarnos de una acción del usuario, además de conseguir que partes de nuestro sitio sean bookmarkables, es haciendo uso del hash de la URL, aunque el objetivo inicial fuera para anclar ciertas partes del documento HTML.

Tiempo atrás, redes sociales como Twitter hacían uso de lo que se conoce como hashbang (#!), aunque en el año 2012 fue eliminado debido a los problemas de rendimiento que causaba en la carga del sitio. Existe un artículo en su blog donde explicaban que, efectivamente, cuando haces uso de los hash (sea con el estilo hashbang o no) el navegador debe cargar una página inicial, descargar y ejecutar un código JavaScript que reconozca el path indicado en el hash, para finalmente localizar y descargar el contenido para el mismo.

En cualquier caso, en la especificación de HTML 5 se formaliza el evento hashchange, el cual nos da la habilidad de detectar cuándo el hash de nuestra URL ha cambiado:

<!DOCTYPE html>
<html>
<head>
    <title>HTML 5 Hashchange event</title>
</head>
<body>
    <ul>
        <li><a href="/#Home">Home</a></li>
        <li><a href="/#Contact">Contact</a></li>
        <li><a href="/#About">About</a></li>
    </ul>
    <ul id="results"></ul>
    <script>
        window.onhashchange = function (event) {
            var result = document.getElementById("results");
            result.innerHTML += "<li><strong>location.hash</strong>: " + location.hash +
                                " <strong>oldURL</strong>: " + event.oldURL
                                + " <strong>newURL</strong>: " + event.newURL;
        }
    </script>
</body>
</html>

A nivel de window, podemos manejar el evento hashchange donde no sólo podemos ser conscientes del cambio del hash, sino que podemos saber cuál era la URL anterior (event.oldURL) y cuál es la nueva (event.newURL).

Este evento está soportado por los navegadores más populares. Sin embargo, Internet Explorer tiene algunas limitaciones al respecto: Si bien es cierto que el evento es lanzado y podemos recuperar el nuevo hash a través de location.hash, las propiedades oldURL y newURL no están soportadas.

Espero que sea de utilidad.

¡Saludos!