History | Webapi

Descripción

El interface History es el que nos permite interactuar con el historial de navegación de nuestro navegador. De esta manera podremos movernos a las páginas que ya hemos visitado hacía delante y hacía detrás.

Sintaxis

History

Constructores

Propiedades

length
scrollRestoration
state

Métodos

back()
forward()
go()
pushState()
replaceState()

Eventos

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>