Propiedades y métodos del objeto location

El objeto location de JavaScript contiene toda la información sobre la url actual del navegador y permite acceder a cada una de sus secciones.

Propiedades del objeto location

• hash   Obtiene o establece el ancla (#) de una url.

url:  "https://tutobasico.com/ejemplos.php#ej1"

var ancla = location.hash;  //Obtiene el ancla de la url

El valor de ancla es:  #ej1

location.hash = "#ej5";  //Establece el ancla de la url

• host   Obtiene o establece el nombre del host y número de puerto de una url.

url:  "https://tutobasico.com:80/ejemplos.php#ej1"

var host_puerto = location.host;  //Obtiene el host y el puerto

El valor de host_puerto es: "tutobasico.com:80"

location.host = "www.google.es:80";  //Establece el host y el puerto

Algunos navegadores no muestran el número de puerto si se trata de los puertos por defecto (80 o 443)

• hostname   Obtiene o establece el nombre del host de una url.

url:  "https://tutobasico.com/ejemplos.php#ej1"

var nombre_host = location.hostname;  //Obtiene el host y el puerto

El valor de nombre_host es: "tutobasico.com"

location.host = "www.google.es:80";  //Establece el host y el puerto

• port   Obtiene o establece el puerto de una url.

url: "https://tutobasico.com:80/ejemplos.php#ej1"

var puerto = location.port; //Obtiene el puerto de la url

El valor de puerto es: "80"

location.port = "8080"; //Establece puerto

• href   Obtiene o establece la url completa.

url:  "https://tutobasico.com/ejemplos.php#ej1"

var url = location.href;  //Obtiene la url completa

El valor de url es: "https://tutobasico.com/ejemplos.php#ej1"

location.href = "https://www.google.com";  //Establece la url

• origin   Obtiene o establece el protocolo, host y puerto de una url.

url:  "https://tutobasico.com:80/ejemplos.php#ej1"

var origen = location.origin;  //Obtiene el origen de la url

El valor de origen es: "https://tutobasico.com:80"

location.origin = "https://youtube.com";  //Establece el origen

• pathname   Obtiene o establece el path de la url (Dirección relativa sin el host).

url:  "https://tutobasico.com/ejemplos.php#ej1"

var path = location.pathname;  //Obtiene el path de la url

El valor de path es: "ejemplos.php#ej1"

location.pathname = "funciones.php#funcion1";  //Establece el path

• protocol   Obtiene o establece el protocolo de una url.

url:  "https://tutobasico.com/ejemplos.php#ej1"

var protocolo = location.protocol;  //Obtiene el protocolo de la url

El valor de protocolo es: "https"

location.protocol = "http";  //Establece el protocolo

• search   Obtiene o establece la parte de búsqueda de la url.

url:  "https://tutobasico.com/ejemplos.php?nombre=objeto

var busqueda = location.search;  //Obtiene la búsqueda de la url

El valor de busqueda es: "?nombre=objeto"

location.search = "?nombre=propiedad";  //Establece la búsqueda

Métodos del objeto location

• assign()   Carga una nueva url.

url:  "https://tutobasico.com/ejemplos.php"

location.assign("https://tutobasico.com/tutoriales";  //Carga la nueva url

El método assign() no borra la url anterior del historial

• reload()   Actualiza la página.

location.reload();  //Vuelve a cargar la url

Por defecto el método reload() recarga la página desde la memoria caché.

Si queremos que recargue desde el servidor debemos pasarle el parámetro true

location.reload(true);

• replace()   Reemplaza la url actual.

url:  "https://tutobasico.com/ejemplos.php"

location.replace("https://tutobasico.com/tutoriales";  //Reemplaza la url

El método replace() elimina la url anterior del historial, por lo que no es posible volver atrás en la navegación

Más tutoriales de javaScript

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo