Crear botón Atrás en la página web usando JavaScript
- El botón Volver en HTML
- Crear un botón Atrás en HTML usando JavaScript
-
Utilice el método
history.back()para crear el botón Atrás en JavaScript -
Utilice el método
history.go()para crear el botón Atrás en JavaScript
En este artículo de JavaScript, aprenderemos cómo crear un botón Atrás usando JavaScript y la necesidad y el uso del botón Atrás en HTML. Veremos cómo obtener la página anterior utilizando los métodos integrados de JavaScript.
El botón Volver en HTML
Los navegadores que usamos ya tienen botones de retroceso, por lo que debe tener una mejor razón para poner el botón de retroceso en su página. Podemos agregar un botón atrás en una página web usando código HTML o JavaScript.
La página web tendrá un botón o un enlace, y al hacer clic en él, el navegador volverá a la página anterior. Esto se puede hacer usando código HTML y un poco de JavaScript en el lado del cliente.
Crear un botón Atrás en HTML usando JavaScript
El código para crear un botón atrás HTML se puede colocar en cualquier lugar dentro de la página. El botón atrás que creamos funcionará igual que el botón atrás en la barra de herramientas de nuestro navegador.
Recuerda que este botón atrás no funcionará si el usuario no tiene historial de navegación. No pasará nada si el usuario abre la página web y hace clic en el botón atrás.
Utilice el método history.back() para crear el botón Atrás en JavaScript
Tenemos un objeto de JavaScript incorporado llamado historial en los navegadores web, que contiene todas las URL que un usuario ha visitado en la ventana actual del navegador. Podemos usar este método history.back() para decirle al navegador web que regrese a la página anterior del usuario. Usar este objeto JavaScript integrado es agregarlo al atributo de evento onclick de un botón. Creamos el botón usando el elemento <form>, que contiene el elemento <input> del tipo de botón, como vemos en el siguiente código.
Código - HTML:
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
</body>
</html>
Producción:
-method.webp)
Si un usuario hace clic en el botón, el usuario vuelve a la página anterior en el navegador.
Utilice el método history.go() para crear el botón Atrás en JavaScript
Si queremos volver a la página específica en el navegador, usamos el método history.go(). Este método de JavaScript incorporado le dice al navegador que vaya a una página específica en el historial de navegación.
Podemos dar cualquier historia específica poniendo un número entre paréntesis, lo que llamamos argumento en programación. Por ejemplo, al dar el número -1 como argumento entre paréntesis, el navegador retrocede una página en el historial del navegador.
En el siguiente código, usamos el método history.go(-1) en lugar del método history.back(). Incluso podemos pedirle al navegador que retroceda o avance más de 1 paso dando el número -2 como argumento entre paréntesis como este history.go(-2).
Código - HTML:
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<INPUT TYPE="button" VALUE="Go one step back" onClick="history.go(-1);">
</form>
<br>
<form>
<INPUT TYPE="button" VALUE="Go two steps back" onClick="history.go(-2);">
</form>
</body>
</html>
Producción:
-method.webp)
De los resultados en la imagen de arriba, tenemos dos botones. Cuando un usuario hace clic en el primer botón, el navegador retrocede una página en el historial del navegador, y si el usuario hace clic en el segundo botón, el navegador retrocede dos páginas en el historial de usuario del navegador.
La principal diferencia entre el método history.back() y history.go() es que back() solo retrocede una página, pero go() retrocede y avanza el número de páginas que necesitemos. pasar como parámetro entre paréntesis relativo a nuestra página web actual.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn