Acceder al hash de la URL con Javascript

29/Ene/2014 JavaScript , 3 Comentarios

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:

  1. <a name="elemento"></a>

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.

  1. locatio

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

  1. //Volvar el hash a la consola
  2. 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

http://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?

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Acceder al hash de la URL con Javascript”

Víctor Cuervo

Cristopher Inostroza - Posicionamiento Web

Muchas gracias. Creo que es necesario contar con alguien que sea especialista en programación, así nos deja más tiempo para el estudio de lenguaje de marcado y diseño a quienes hemos abogado por eso; lo cual no significa que no se puedan aprender las bases en caso de resolver problemas o implementar soluciones efectivas.

Muchas gracias Víctor. Saludos.

Víctor Cuervo

Víctor Cuervo

@Christopher, javascript es un lenguaje de programación, por su parte HTML es un lenguaje de marcado.

Víctor Cuervo

Cristopher Inostroza - Posicionamiento Web

Excelente información. Hay muchas cosas que aprender.

Una consulta: Javascript corresponde a lenguaje de marcado o de programación?

Saludos y gracias.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*