JavaScript: redireccionar y recargar webs. window.location. href, hostname, assign, reload, replace (CU01171E)

Resumen: Entrega nº71 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01171E

 

 

WINDOW.LOCATION

Dentro de la jerarquía de objetos JavaScript existe un objeto denominado location, que es una propiedad de window. A su vez, se dice que existen objetos de tipo Location, siendo el objeto window.location un ejemplo de este tipo de objetos. Con este objeto podemos extraer información de la url (por ejemplo parámetros recibidos), redireccionar a otra página web, ó refrescar la web actual.

logo javascript

 

Recordemos que de forma aproximada puede representarse la jerarquía de objetos JavaScript de la siguiente manera.

jerarquia objetos javascript

 

 

PROPIEDAD WINDOW.LOCATION

La propiedad window.location devuelve un objeto de tipo Location con información relacionada con la URL del documento actual.

Vamos a citar aquí algunas de las propiedades de los objetos Location. Tener en cuenta que algunas de ellas no son soportadas por algunos navegadores:

PROPIEDAD

UTILIDAD

EJEMPLOS aprenderaprogramar.com

href

Devuelve un string con la url completa. window.location es equivalente a document.location pero recomendamos usar window.location.

alert ('url actual: '+window.location.href);

alert ('url actual: '+location.href);

// Devuelve la url actual completa

protocol

Devuelve el protocolo de la URL, normalmente http ó https. Si trabajamos en local será file:

alert ('protocolo actual: '+window.location.protocol);

//Devuelve por ejemplo http

host

Devuelve el nombre del servidor, normalmente como nombre de dominio, y si existe un puerto especificado también, separado con :.

alert ('host actual: '+window.location.host);

//Devuelve por ejemplo http://aprenderaprogramar.com

hostname

Devuelve el dominio o servidor.

alert ('el hostname actual: '+window.location.hostname);

//Devuelve por ejemplo http://aprenderaprogramar.com

pathname

Devuelve la ruta excluido el nombre de dominio o servidor.

alert ('El pathname actual: '+window.location.pathname);

//Por ejemplo devuelve /ejemplo1.html

search

Devuelve la cadena que representa los parámetros que existen en la url.

alert ('Los parámetros en url: '+window.location.search);

// Por ejemplo: Los parámetros en url: ?name=pepe&apellido1=perez&pais=ecuador

hash

Devuelve # seguido de un texto si en la url existe un #seguido de un texto (ancla de localización del fragmento html).

alert ('Valor localizador #: '+ window.location.hash);

// Por ejemplo: #final

origin

Devuelve una cadena que representa la raíz del sitio web

alert ('Valor origin: '+ window.location.origin);

//Devuelve por ejemplo http://aprenderaprogramar.com

 

 

Vamos a citar aquí algunos de los métodos de los objetos Location. Tener en cuenta que algunas de ellas no son soportadas por algunos navegadores:

MÉTODO

UTILIDAD

EJEMPLOS aprenderaprogramar.com

assign (urlDestino)

Asigna una url a la ventana actual, lo que genera que se cargue la urlDestino. El usuario puede volver atrás con el botón back del navegador.

alert ('Transfiriendo a aprenderaprogramar: ');

window.location.assign('http://aprenderaprogramar.com');

//Da lugar a que se cargue la url indicada con posibilidad de volver atrás con el botón back

reload (opcSiDesdeServidor)

Da lugar a la recarga de la url actual. Si se indica como parámetro true, la recarga se hará desde el servidor (refresco completo). Si no se especifica o es false la recarga puede ser desde caché.

alert ('Recargando la página... ');

window.location.reload(true);

//Se recarga la página desde el servidor (refresco completo)

replace (urlDestino)

Asigna una url a la ventana actual, lo que genera que se cargue la urlDestino. El usuario no puede volver atrás con el botón back del navegador.

alert ('Reemplazando la página... ');

window.location.replace('http://aprenderaprogramar.com');

//Da lugar a que se cargue la url indicada sin posibilidad de volver atrás con el botón back

toString()

Devuelve una cadena representativa de la url (window.location.toString() devuelve lo mismo que window.location.href)

alert ('Url actual: '+window.location.toString());

//Devuelve la url actual

 

 

EJEMPLO DE USO DE WINDOW.LOCATION

Supongamos una url que se construye según este patrón: http://aprenderaprogramar.com/index.php?option=compra&moneda=euro&producto=libro1, donde el parámetro option puede ser compra, venta o intercambio. El parámetro moneda puede ser pesoMexicano, euro, pesoArgentino, pesoColombiano, bolivar, sol, pesoChileno. Y el parámetro producto puede ser cualquier valor.

Y supongamos que queremos rescatar el valor que tenga el parámetro moneda usando JavaScript. Podemos hacerlo de esta manera. Escribe este código y guárdalo con nombre de archivo ejemplo1.html:

<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

function ejemplo() {

                msg = '';

                var moneda = extraerParametroUrl('moneda');

                if (moneda) {alert ('El valor del parámetro moneda en la url es: '+moneda)}

                else {alert ('No se recibe moneda en la url'); }

}

function extraerParametroUrl( nombreParametro ){

                var regexS = "[\\?&]"+nombreParametro+"=([^&#]*)";

                var regex = new RegExp ( regexS );

                var tmpURL = window.location.href;

                var results = regex.exec( tmpURL );

                if( results == null ) { return "";} else {return results[1];}

}

</script>

</head>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()"><a href="#"> Probar</a> </div>

</body></html>

 

 

A continuación visualiza el archivo en tu navegador. El resultado esperado es que al pulsar el enlace “Probar” se muestre: << No se recibe moneda en la url >>

Si añadimos el parámetro al final de la ruta, por ejemplo: …/ ejemplo1.html?moneda=pesoMexicano

El resultado esperado es que al pulsar el enlace “Probar” se muestre: <<El valor del parámetro moneda en la url es: pesoMexicano>>

Este código hace uso de expresiones regulares JavaScript. Si no recuerdas cómo funcionan éstas, lee los anteriores apartados del curso que hemos dedicado a expresiones regulares.

Hemos definido var regexS = "[\\?&]"+nombreParametro+"=([^&#]*)";

Esto representa una expresión regular JavaScript que comienza con ? ó &, viene seguido de nombreParametro, seguido de un igual, y de cualesquiera caracteres hasta alcanzar el final de la cadena ó un simbolo & ó un símbolo #, que serían las situaciones que nos indicarían que el valor del parámetro ya ha sido extraido completamente. Recordar que dentro de corchetes el símbolo ^ funciona como negación. Al ejecutar exec sobre una cadena (en este caso la URL) el índice [0] del resultado contiene el valor completo, por ejemplo <<?moneda=pesoMexicano>>, mientras que el siguiente índice contiene el match correspondiente al primer paréntesis, en este caso sería <<pesoMexicano>>. El índice [2] contendría el match correspondiente al segundo paréntesis, pero aquí sólo tenemos un paréntesis con lo cual el índice [2] no tiene valor definido.

Como conclusión de este ejemplo, vemos cómo podemos rescatar parámetros de una url enviados por el método GET haciendo uso de JavaScript de varias maneras: hemos visto métodos específicos y esta otra manera mostrada en este ejemplo, que al ser más generalista asegura un buen funcionamiento en todos los navegadores.

 

 

EJERCICIO

Crea una página web que al ser invocada muestre un mensaje “Hemos cambiado de ubicación esta página. En breves momentos será redireccionado…” junto a una cuenta atrás que muestre 5, 4, 3, 2, 1 (correspondiente a 5 segundos). Tras transcurrir 5 segundos y mostrarse la cuenta atrás, el usuario debe ser redireccionada a la url http://aprenderaprogramar.com. Para realizar este ejercicio debes usar la propiedad window.location junto con funciones que permitan el retardo en la ejecución vistas en entregas anteriores del curso.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación