En este tutoriales en linea voy a recopilar unos pequeños snippets de jаvascript 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 ...unsitio.com/directorio/pagina.html?key=value#4574, la localización es toda la cadena ...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 ...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 ..unsitio.com/directorio/pagina.html, la ruta absoluta es ...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 ...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 ...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 ...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.
Comentarios