Botón para volver atrás en HTML y Javascript
Hoy te voy a contar como hacer un botón para volver atrás en HTML y Javascript. Con ejemplos simples para que puedas copiar y pegar en tu página web.
Toda la magia del botón para volver atrás, se basa en el objeto del DOM llamado history, que contiene la lista de URLs (direcciones de páginas web) visitadas por el usuario (siempre dentro de la ventana actual).
El objeto history es parte del objeto window y se accede mediante la propiedad window.history. Si quieres conocer un poco mas o investigar sobre los diferentes métodos que ofrece el objeto history, podes ir directamente a las fuentes.
Vamos a los ejemplos:
Para hacer que un usuario regrese a la página anterior utilizamos la función history.go(). Esta funcionalidad puede ser invocada en html usando JavaScript en las etiquetas de enlace <a href=»> o en los elementos del tipo botón <input type=”button”> o <button>.
Al utilizar esta función, le vamos a indicar al navegador hacia donde queremos dirigirnos, según el método seleccionado.
Veamos como hacerlo con una etiqueta de tipo enlace:
<a href="javascript: history.go(-1)">Volver atrás</a>
El parámetro que pasamos entre paréntesis dentro del history.go(xx) va a indicar a que lugar de la lista de URLs visitadas vamos a dirigirnos.
Así es como se vería utilizando un enlace:
En este ejemplo, al pasar como parámetro (-1) le estamos indicando al navegador que regrese hacia atrás 1 lugar en la lista de páginas visitadas. Los valores de el parámetro nos permite ir hacia adelante o hacia atrás en el historial.
Ahora voy a aplicar la misma función usando un botón:
<input type="button" value="Página anterior" onClick="history.go(-1);">
En este caso, la funcionalidad es exactamente la misma. En lugar de un enlace, lo haremos con un botón para volver atrás en HTML, que puede ser personalizado mediante CSS y quedar mucho más elegante, acorde al diseño del sitio web.
Así se vería el ejemplo utilizando un botón:
Métodos del objeto history
El objeto history permite utilizar estos tres métodos para moverte a través de la lista de URLs visitadas en el historial.
| Método | Descripción |
|---|---|
| back() | Vuelve a la página anterior en el historial de la ventana. Es como hacer click en el botón volver de tu navegador. |
| forward() | Carga la página siguiente en la lista del historial. Si no existe una página siguiente en la lista, no hará nada. |
| go() | Carga una URL especifica dentro de la lista del Historial, según el valor pasado como parámetro entre los paréntesis. |
Si bien no existe un estándar público que aplique al objeto history, prácticamente todos los navegadores lo reconocen y lo ejecutan sin inconvenientes.
Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.
Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.
Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.
Estupendo tutorial, Federico!!
Me ha venido genial para añadir un botón de volver atrás en WordPress de forma sencilla, después de dar varias vueltas.
Muchas gracias!!!
De nada Chechu, me alegro que lo hayas encontrado útil. Saludos!