body.onhashchange | Html

Descripción

El evento onhashchange se lanza cuando cambia el valor del hash de la URL. Es decir, el valor que va asociado a la almohadilla. Los hash son utilizados en aplicaciones SPA (Single Page Application) y se utilizan para gestionar la navegación. En ese punto el evento onhashchange nos puede ser de mucha utilidad.

Sintaxis

<body onhashchange="funcion"></body>

Elemento Padre

body

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Controlar cambio hash</title>
</head>
<body onhashchange="cambioHash();">

    <button onclick="nuevoHash('P1');">Página 1</button> 
    <button onclick="nuevoHash('P2');">Página 2</button>
    <button onclick="nuevoHash('P3');">Página 3</button>

    <br/><br/>

    <div id="mensaje"></div>

    <script>

        function nuevoHash(nombre) {
            location.hash = "#"+nombre;
        }

        function cambioHash(){
            document.getElementById("mensaje").innerHTML = "Navegación al hash '" + location.hash + "'";
        }
    </script>

</body>
</html>

Artículos

Manual HTML

Aprende más sobre HTML consultando online o descargando nuestro manual.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Vídeos HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.