Artículos
Javascript

Acceder al hash de la URL con Javascript

29/Ene/2014

Si miras una URL el fina de esta puede contener una palabra separada por un símbolo de almohadilla (#). Esto es lo que se conoce como elemento hash de la URL y nos sirve para posicionarnos dentro de una parte determinada de la página. Esto lo conseguimos de forma sencilla mediante HTML.

La URL miweb.html#elemento se va a posicionar en la página allí dónde utilicemos el siguiente código:

Si quieres más información al respecto puedes leer el artículo Enlace a una parte concreta de la página el cual te resolverá todas tus dudas.

Pero, ¿cómo podemos acceder al hash de la URL con Javascript? Es decir, qué hacer si queremos controlar cuando el usuario llegue con una URL que contenga una etiqueta o elemento de hash.

La solución es bastante sencilla y es que en Javascript tenemos el objeto location, el cual hace referencia a la URL que maneja el navegador, este objeto nos va a facilitar acceder al hash de la URL con Javascript.

location

En concreto tenemos una propiedad del objeto location llamada .hash (el nombre que ni pintado) que nos devuelve el hash de la URL.

//Volvar el hash a la consola
console.log(location.hash;)

Como podemos ver, el uso de la propiedad location.hash nos facilita el acceso al hash de la URL con Javascript. Eso sí, solo tenemos que tener cuidado con una cosa, y es que no nos devuelve el elemento correspondiente con el hash, si no que nos devuelve el elemento precedido de la almohadilla.

Así de la URL

https://lineadecodigo.com/#acerca-de

El objeto location.hash nos devolverá:

#acerca-de

Ahora ya solo queda decidir qué hacer con el hash. Por ejemplo mostrar un contenido u otro, mostrar una pestaña u otra,… ¿qué más casos se te ocurren para utilizar la propiedad hash en Javascript?

Código Fuente

Descárgate el código fuente de Acceder al hash de la URL con Javascript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

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

Test Javascript

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

Test Javascript
Suscribir
Notificar de
guest
3 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios