En este post voy a recopilar unos pequeños snippets de javascript para obtener la URL de la página actual. En ocasiones no necesitamos la URL completa sino algunas partes, como el hash, el query string o la ruta. Cubriré las más importantes y más utilizados.

1

Obtener la URL actual completa

La URL actual se puede obtener mediante este código:

var URLactual = window.location;
alert(URLactual);

En window.location se almacena el valor, como su nombre indica, de la localización del documento actual. Por ejemplo, si estamos en la URL http://unsitio.com/directorio/pagina.html?key=value#4574, la localización es toda la cadena http://unsitio.com/directorio/pagina.html?key=value#4574, incluyendo el dominio y protocolo (http://unsition.com), la ruta o pathname (/directorio/pagina.html), el query string (?key=value) y el identificador de fragmento (#4574).

En este contexto window.location sería sinónimo de window.location.href. Con este código se obtendría el mismo resultado:

var URLactual = window.location.href;
alert(URLactual);

Con jQuery se puede obtener con:

var URLactual = jQuery(location).attr('href');
2

Obtener el pathname

Además del href, el objeto window.location tiene más propiedades. Por ejemplo, si queremos obtener sólo el pathname (ruta):

var pathname = window.location.pathname;
alert(pathname);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html, el pathname es /directorio/pagina.html. El pathname no incluye, si lo hay, el query string ni el identificador de fragmento.

3

Obtener la ruta absoluta

Con la siguiente función obtendríamos la ruta absoluta (absolute path) que incluye el pathname y el dominio:

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

Por ejemplo,en la URL http://unsitio.com/directorio/pagina.html, la ruta absoluta es http://unsitio.com/directorio/.

4

Obtener el dominio

Para obtener sólo el dominio actual podemos acceder al atributo host de window.location:

var URLdomain = window.location.host;
alert(URLdomain);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html, el dominio es unsitio.com. Nota que no se incluye el protocolo (en este caso http). Si necesitamos saber el protocolo utilizaremos window.location.protocol.

5

Obtener el hash o identificador de fragmento

Si queremos obtener sólo el hash de la URL:

var URLhash = window.location.hash;
alert(URLhash);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html#boo, el hash es #boo.

6

Obtener el query string

Por último, si queremos obtener el query string de la URL actual (también llamado search):

var URLsearch = window.location.search;
alert(URLsearch);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html?key=value#boo, el query string es ?key=value.

El objeto window.location tiene más propiedades que nos pueden ser útiles. Puedes ver una lista completa en esta página de Mozilla Developer.

  • Fernanda Avilez

    Excelente POST lo recomiendo, a veces javascript me parece más dificil que JAVA porque no existe documentación, fija. Pero la comunidad de Javascript es más solidaria y explicita que la comunidad de JAVA, además los manuales de JAVA son muy escuetos…

  • Thunder Orlof

    Muy buena aportación, oye pero que pasa si tengo un conjunto de elementos ‘a’ y deseo obtener el atributo href del elemento al que le doy click únicamente, en caso de salirse del tema mi duda, podrías ayudarme con ello

    • Alonso

      En jQuery se puede hacer facilmente con una variacion en los eventos de click llamados Delegados, lo que permiten es, por ejemplo, si tienes una lista con elementos ‘a’, le pones ese evento a la lista, pero delegas a los elementos ‘a’, por lo tanto al hacer click a un elemento ‘a’, el evento de la lista, se delega al elemento ‘a’, y para verificar solamente ese ‘a’, se puede hacer en jquery con: $(this).attr(‘href’)

  • Gabriel Gonzalez

    digamos que ya obtuve mi direccion url como hago para compartirla en en facebook al momento de darle click al icono de facebook que esta en mi pagina

    • Lo siento Gabriel pero me gusta mantener las conversaciones on topic. Tu consulta parece que no tiene nada que ver con lo tratado en este post ya que, como dices, obtienes la URL correctamente. Si no es así y tienes alguna duda sobre la obtención de la URL actual te ayudaré encantado.

  • Jhosep

    Muchas gracias. Me podrían colaborar con un pequeño problema, no habrá una forma de ortener parte de la url, me explico.
    Quedar algo más o menos así:

    Url inicial:

    http://www.algo.com/esta/ejemplo/varios/java/funcion

    Url Final

    /ejemplo/varios/java/funcion

    Si hay alguna forma, me podrían por favor decirmela, es que he estado dando vueltas con esto y nada que me ha podido dar.

    • TechGuy

      Una vez que tengas la URL utiliza algún método para eliminar una parte del string, por ejemplo substring() o replace().

  • Ricardo

    Muchas gracias. Me ha servido para predeterminar un valor de un select (categoria del envio) en un formulario de contacto. Un post muy sencillo y util. Sigue así, que eso vale mucho.