Descripción
Al ejecutar el método back()
conseguimos que el navegador se mueva en una página atrás dentro de su sesión de historial que tiene almacenada en el objeto History
.
Sintaxis
History.back()
Parámetros
- N/A
Objeto Padre
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ir a una posición del History API</title>
</head>
<body>
<h1>Ir a una posición del History API</h1>
<article>
<p>Ejemplo para manipular el History API</p>
<button id="adelante">Adelante 2</button>
<button id="atras">Atrás 2</button>
<span id="salida"></div>
</article>
<script>
var salida = document.getElementById("salida");
function escribir(texto) {
salida.innerHTML = texto;
}
window.onpopstate = function(event) {
escribir("Estado: " + JSON.stringify(event.state));
};
var fwd = document.getElementById("adelante");
fwd.addEventListener("click",function (e){
history.go(2);
},false);
var bwd = document.getElementById("atras");
bwd.addEventListener("click",function (e){
history.go(-2);
},false);
// Vamos a crear estados en el historial
history.pushState({ pagina: "1" }, "Titulo 1", "history-go.html#p1");
history.pushState({ pagina: "2" }, "Titulo 2", "history-go.html#p2");
history.pushState({ pagina: "3" }, "Titulo 3", "history-go.html#p3");
history.pushState({ pagina: "4" }, "Titulo 4", "history-go.html#p4");
history.pushState({ pagina: "5" }, "Titulo 5", "history-go.html#p5");
history.pushState({ pagina: "6" }, "Titulo 6", "history-go.html#p6");
history.pushState({ pagina: "7" }, "Titulo 7", "history-go.html#p7");
history.pushState({ pagina: "8" }, "Titulo 8", "history-go.html#p8");
console.log("El número de estados es de " + history.length);
escribir("Estado: " + JSON.stringify(history.state));
</script>
</body>
</html>