Simbiontes
Cada loco con su tema   

Blog |  Acerca de...  |  Asuntos recurrentes  | 

Detectar referrer y parámetros de almohadilla (ancla) con javascript

Escrito por El Malvado Acidonitrix , Jueves 21 de Julio de 2005
   1 Comentarios
Archivado en: Codeblog

Cómo detectar si llega una almohadilla/ancla/anchor/hash (#) en una URL desde Javascript. Se trata de una funcionalidad que los lenguajes de servidor no implementan por una cuestión de definición, lo que nos obliga a realizar determinadas operaciones en el lado cliente. Y también, obtener el referrer con javascript.

En ocasiones es necesario detectar si la URL de una página llega con una almohadilla (o ancla/anchor). Por ejemplo para resaltar un elemento, ya que una URL que se carga de esa manera atrae la atención del usuario a un punto concreto, pero es posible que ese punto esté rodeado de un montón de contenido. En lenguajes de servidor se puede despiezar la URL por completo salvo el hash, es decir, lo que viene con la opcional almohadilla. La justificación de este comportamiento es que se trata de una señal del navegador para el navegador que el servidor ignora. Por tanto, el tratamiento de un ancla debe realizarse en el lado de cliente. Mediante las funciones del DOM es posible identificar un elemento por su ID y de ahí efectuar alguna operación como, por ejemplo, modificar el estilo por defecto.

Javascript ofrece dos propiedades de interés para el elemento document:

  • El referrer, o página desde la que se llega.
  • El hash, que nos ocupa en este momento.

El referrer llega de esta manera: document.referrer. En este ejemplo no lo usamos, pero es un buen sitio para apuntarlo.
El hash se obtiene así: document.location.hash.

Supongamos que deseamos resaltar un elemento identificado por un ID que lleva asociado un ancla con el atributo name correlativo: por ejemplo <a name="58"></a> asociado a un div con el id 58. En nuestro caso, al final del HTML colocamos un script. Ponerlo al final nos garantiza que se ejecutará cuando haya cargado casi toda la página (a falta del cierre del body y del documento, ya que no es conveniente poner algo fuera de los límites formales del documento salvo que tengas claro lo que haces).

< script languaje = "javascript" >
// verificar si viene un ancla
if (document.location.hash != "")
{
    // quitar la almohadilla
    var idelemento = document.location.hash.replace("#","");

    // modificar el estilo del elemento
    document.getElementById(idelemento). style.backgroundColor = '#FC9';

}
</ script >
</ body >
</ html >


1 comentarios

Bla Bla
Dice: David Bernad, Martes 28 de Abril de 2009

Hola.
Muy bueno el artículo. Lo malo es que lo que andaba buscando era precisamente el referrer del que no has puesto ejemplo.

Estoy intentando usarlo pero o lo estoy haciendo mal o no está funcionando.

Un saludo.



Enviar un comentario










Introduce el código que aparece aquí...
Recordar información personal en este PC...







Mostrar búsqueda avanzadaActivar búsqueda avanzada

Bienvenido al repositorio de los simbiontes

Una página colectiva y ecléctica para comentar y apuntar cosas.

Estás viendo los archivos de Julio de 2005. Visita la portada para ver las últimas notas.

Sugerencias de lectura

Los simbiontes hablan de...

Sugerencias de lectura

Si quieres curiosear, puedes consultar:

  • todas las entradas archivadas por categoría (abstract).
  • Las entradas ordenadas mensualmente.
  • Suscribirte a los feeds (más abajo).
  • Lo que vienen buscando otras personas.
  • Si lo prefieres, puedes ver la portada en el formato anterior.
  • ...o leer la presentación para saber qué es esto y si puedes fiarte o no de lo que aquí se dice, y por qué pensamos que esto no es un blog aunque lo llamemos así para entendernos entre nosotros.

Sindicación RSS

  • ¿Qué es un feed?
  • Agregadores recomentados

Lecturas edificantes y tráfico de influencias

La tira Ecol

Tira Ecol

http://tira.escomposlinux.org
La tira ecol ha vuelto.