Logo webapi
W3Api

History.back() | Webapi

 
  • Modificado: 03 Feb 2023

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

History

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>

Artículos