Inicia sesión


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

Como obtener la URL de la página actual con jаvascriptEn 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.
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.


  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-06
  • Categorias: Diseño Web Lenguajes De Programacion javascript jQuery WebSite webmasters Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






¿Por qué hablar de sexo es un tabú?

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-10-16
  • Categorias: Estilo Trucos y tips Noticias Tutorial

Como hacer el efecto de desaturacion selectiva con Photoshop

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-10-15
  • Categorias: Adobe PhotoShop Trucos y tips Noticias Tutorial

Decoloración en CSS a través del modo de mezcla

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-10-15
  • Categorias: PhotoShop Diseño Web CSS3 html5 WebSite webmasters Trucos y tips Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-21
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Curso intensivo para principiantes en HTML5

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-03
  • Categorias: Diseño Web html5 Html WebSite Cursos Tutorial

Mejorar la presencia online de tu empresa: curso para principiantes

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-06-25
  • Categorias: Marketing SEO Cursos Noticias Tutorial