El objeto window.history contiene el historial de los navegadores. En primer lugar, la parte de la ventana se puede eliminar de la ventana . El historial solo con el objeto de historial funciona bien. El objeto de historial de JS contiene una array de URL visitadas por el usuario. Al usar el objeto de historial, puede cargar una página anterior, anterior o cualquier página en particular usando varios métodos.
Propiedad del objeto de historial de JavaScript:
- length: Devuelve la longitud de las URL del historial visitadas por el usuario en esa sesión.
Métodos del objeto de historial de JavaScript:
- adelante(): carga la página siguiente. Proporciona el mismo efecto que volver a hacer clic en el navegador.
- back(): Carga la página anterior. Proporciona el mismo efecto que hacer clic en adelante en el navegador.
- go(): carga el número de página dado en el navegador. La función history.go (distancia) proporciona el mismo efecto que presionar el botón Atrás o Adelante en su navegador y especificar la página exactamente que desea cargar.
Código JavaScript para mostrar el funcionamiento de la función history.back():
Código #1:
<html>
<head>
<title>GeeksforGeeks back() example</title>
</head>
<body>
<b>Press the back button</b>
<input type="button" value="Back" onclick="previousPage()">
<script>
function previousPage() {
window.history.back();
}
</script>
</body>
</html>
Producción:
Press the back button Back
Haga clic aquí para ver el efecto del código
. Nota: este ejemplo no funcionará si la página anterior no existe en la lista de historial. Si hace clic en el enlace anterior , se abre una nueva página y cuando presiona el botón Atrás en esa página, se redirige. a esa página que abrió anteriormente.
Código JavaScript para mostrar el funcionamiento de la función history.forward():
Código #2:
<html>
<head>
<title>GeeksforGeeks forward() example</title>
</head>
<body>
<b>Press the forward button</b>
<input type="button" value="Forward" onclick="NextPage()">
<script>
function NextPage() {
window.history.forward()
}
</script>
</body>
</html>
Press the forward button Forward
Nota: este ejemplo no funcionará si la página siguiente no existe en la lista del historial. Este código se puede usar cuando desea usar el botón de avance en su página web. Funciona exactamente igual que el botón de reenvío de su navegador. Si la página siguiente no existe, no funcionará.
Código JavaScript para mostrar el funcionamiento de la función history.go():
go(4) tiene el mismo efecto que presionar el botón de avance cuatro veces. Un valor negativo lo hará retroceder a través de su historial en un navegador.go(-4) tiene el mismo efecto que presionar el botón Atrás cuatro veces.
Código #3:
<html>
<head>
<title>GeeksforGeeks go() example</title>
</head>
<body>
<input type="button" value="go" onclick="NextPage()">
<script>
function NextPage() {
window.history.go(4);
}
</script>
</body>
</html>
Nota: este ejemplo no funcionará si las próximas cuatro páginas no existen en la lista del historial.
Publicación traducida automáticamente
Artículo escrito por vivekkothari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA