Redireccionar, actualizar y recargar página con jQuery

Redireccionar, actualizar y recargar página con jQuery

También podemos crear redirecciones con jQuery, las cuales son muy útiles por ejemplo, para un formulario de inicio de sesión o login. Con estas redirecciones, a parte de validar un formulario, podemos enviar a un usuario a la página que queramos después de una acción.

Para crear este tipo de acciones, vamos a trabajar con el objeto window.location. Location se encarga de manejar todo lo relacionado con urls. El objeto location se puede cargar sin el prefijo window.

Crear redirección con jQuery

Si queremos crear una redirección a otra página con jQuery y JavaScript, lo único que tenemos que hacer es modificar el atributo href de la clase location con la dirección de destino. Un ejemplo sería el siguiente:

location.href = “https://www.tutorialesjquery.com”;

No haría falta nada más, con esa línea ya tenemos creada la redirección. Cualquier evento que ejecute esa línea de código creará una redirección a www.tutorialesjquery.com.

Recargar / Actualizar / Refrescar página con jQuery

En cambio, si lo que queremos es recargar la página en la que nos encontramos, tenemos dos formas:

  • Actualizando el valor del atributo href de la clase location con su mismo valor. En este ejemplo se puede apreciar:

location.href = location.href;

  • Utilizando la función reload() del objeto location. Su sintáxis es la siguiente.

location.reload();

En ambos casos, lógicamente, debe haber un evento que ejecute el código que deseemos.

Vamos a crear un pequeño proyecto en el que vamos a movernos entre dos páginas mediante redirecciones. Además, podremos refrescar cualquiera de ellas. La estructura de archivos del proyecto va a ser la siguiente:

Copy to Clipboard

El código fuente del archivo pagina1.html y pagina2.html va a ser muy similar. Lo único que varía es un texto para indicar en qué página nos encontramos.

El fichero pagina1.html va a tener el siguiente código:

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

Copy to Clipboard

El fichero pagina2.html va a tener el siguiente código:

Copy to Clipboard

Por último, el fichero index.js, que va a ser quien le de funciones a todos los botones de las dos páginas, va a tener el siguiente código:

Copy to Clipboard

Como podemos ver en el código de index.js, cada botón tiene una función distinta excepto los de recargar, que utilizan las dos formas anteriormente explicadas.

Para terminar con el tutorial, os dejo los enlaces para que puedas descargar todo el proyecto y probar su funcionamiento mediante una demo.

4.8 (95.91%) 44 votes

2020-10-09T09:25:26+00:00