Botón volver atrás en HTML5 y Javascript

Para hacer que un usuario regrese a la página anterior utilizamos la función Javascript history.go(). Esta funcionalidad se puede utilizar tanto dentro de otra función javascript como html y usando JavaScript en etiquetas de tipo enlace <a> o tipo botón <input type=”button”> o <button>. Al utilizar esta función javascript el navegador volverá a la página anterior.

Enlace html para volver a la página anterior

Esta página tendrá un botón o un enlace y al hacer clic en él volverá a la página anterior (función volver atrás) sin necesidad de que nosotros conozcamos desde que página accedió el usuario (esto es especialmente util cuando no sabemos desde qué página proviene el usuario).

Mediante el siguiente código html / javascript es muy sencillo crear un enlace html que permita retornar al usuario hacia la página previa donde se encontraba y que pueda continuar su navegación:

<a href="javascript: history.go(-1)">Volver</a>

Botón para volver atrás

Si queremos actualizar la página del usuario con la última página visualizada por el usuario, pero en este caso queremos aplicar esta solución sobre un botón (elemento <input>) podemos mostrar un botón de retroceso usando el siguiente código html en nuestras páginas:

<input type="button" value="Página anterior" onClick="history.go(-1);">

Este código mostrará en la pantalla botón de retroceso implementado con HTML que se puede colocar en cualquier lugar dentro de la página. Al pulsar sobre este botón el usuario volverá a la ventana correspondiente a la página anterior. También es posible crear una función javascript más amplia, tal como te explicamos a continuación.

Utilizar la función Javascript history.go() dentro de otra función javascript

La función javascript history.go() es una función javascript para volver atrás. Esta función también la podemos utilizar dentro de una función javascript que contenga una funcionalidad más amplia. Por ejemplo, supon que quieres realizar una llamada a la función “otraFuncionJavascript” que por ejemplo contiene lógica Ajax (para hacer que quede registrado que el usuario ha hecho click sobre ese botón) y de forma adicional queremos retornar al usuario hacia la página anterior donde se encontraba.

En este caso implementaríamos un botón en el código HTML:

<input type="button" value="Mi botón" onClick="funcionAsociadaBoton()">

Y utilizaríamos una función javascript similar a la siguiente:

<script>

function funcionAsociadaBoton(){

/*otraFuncionJavascript();*/

 

history.go(-1);

} </script>

Si quieres probar la función anterior borra los comentarios (/*otraFuncionJavascript();*/) y crea una nueva función otraFuncionJavascript(); ya que de lo contrario te daría error si copias directamente ese código.

Hosting

Te recomendamos...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *