A continuación encontrarás una breve recopilación de unos pequeños
códigos en javascript para que puedas obtener la URL de la página
actual o parte de la misma.
Y es que,... a veces no necesitamos la URL completa, pero si podríamos
requerir ciertas partes, tales como el dominio, la ruta, el hash,
etc.
De tal modo, al menos se hará referencia de aquellas comúnmente
utilizadas.
En ciertos ejemplos, solo con fines demostrativos para que se muestre el
resultado, se ha estimado incluir la instrucción alert( ).
Además, recuerda que deben ser incluidos dentro de <script> ...
</script>
Obtener la URL actual completa
La URL actual es toda la dirección que generalmente podemos ver en la barra
de direcciones del navegador. Se la puede obtener mediante este código:
var URLactual = window.location;
alert(URLactual);
Como vemos, en la variable URLactual, se almacena el valor obtenido usando
window.location; que tal como su nombre indica, es la localización del
documento actual.
Por ejemplo, si la URL que vemos en la barra de direcciones es:
http://elsitio.com/folder/pagina.html?key=value#1234
La localización o URL de la página actual es toda la cadena
http://elsitio.com/folder/pagina.html?key=value#1234.
Así, observarás que se incluye el protocolo y dominio
(http://elsitio.com), la ruta o pathname (/folder/pagina.html),
el query string (?key=value) y el identificador de fragmento
(#1234).
Entonces, puede decirse que window.location prácticamente sería sinónimo de
window.location.href. De tal modo que con este código se obtendría el mismo
resultado:
var URLactual = window.location.href;alert(URLactual);
Utilizando jQuery se puede obtener con:
var URLactual = jQuery(location).attr('href');
Obtener la ruta absoluta
Empleando la siguiente función podemos obtener la ruta absoluta (absolute
path) que incluye el dominio y el pathname:
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));
}
alert (getAbsolutePath());
Por ejemplo, si tenemos la URL http://elsitio.com/folder/pagina.html,
la ruta absoluta es http://elsitio.com/folder/
Obtener solo la ruta (pathname)
El objeto window.location tiene más propiedades. Entre ellas, si queremos
obtener sólo el pathname (ruta) de la URL, podemos usar:
var pathname = window.location.pathname;
alert(pathname);
Por ejemplo, si tenemos http://elsitio.com/folder/pagina.html, el
pathname es /folder/pagina.html.
De tal modo, el pathname no incluye el query string ni el identificador de
fragmento, siendo el caso de que lo hubiera.
Obtener el protocolo
Si necesitamos saber el protocolo utilizaremos window.location.protocol.
Así:
var URLprotocolo = window.location.protocol;
alert(URLprotocolo);
De tal manera, esto nos devolverá http: o https: según sea el
caso.
Obtener el dominio
Para obtener solamente el dominio de la url actual, podemos emplear el
atributo host de window.location, tal como sigue:
var URLdominio = window.location.host;
alert(URLdominio);
Por ejemplo, si tenemos la
url http://elsitio.com/folder/pagina.html, el dominio es
elsitio.com. Fíjate que no se incluye el protocolo (en este caso
http:).
Obtener el hash o identificador de fragmento
Si deseamos obtener solo el hash de la URL:
var URLhash = window.location.hash;
alert(URLhash);
Por ejemplo, si tenemos http://elsitio.com/folder/pagina.html#fama,
obtenemos el hash #fama
Obtener el query string
Si lo que queremos es obtener el query string de la URL actual (conocido
también como search), podemos recurrir a:
var URLsearch = window.location.search;
alert(URLsearch);
Por ejemplo, si tenemos la url
http://elsitio.com/folder/pagina.html?key=value#fama, el query string
es ?key=value.
NOTA: El objeto window.location tiene más propiedades que pueden
resultarte muy útiles. Si deseas ver una lista completa, puedes visitar esta
página de Mozilla Developer.
Espero que esta breve recopilación de códigos para obtener la url de la página actual o sus partes, haya sido lo que andabas buscando y sobre todo que te resulte útil para lo que requieres hacer.
No hay comentarios.:
👉 Publicar un comentario