Obtener la URL de la página actual con JavaScript (y sus componentes) JavaScript
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.
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');
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.
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/
.
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
.
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
.
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.