Como obtener la URL de la página actual con JavaScript 6kr2i

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. 6a1p4b

Obtener la URL actual completa 1s2w47

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 b5b6n

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 3sa19

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 6j1y6d

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 133553

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 4a455f

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.

Podéis probar los anteriores códigos en Clic aquí...

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.

Como obtener la URL de la página actual con JavaScript 1k4d5b