body.onpopstate | Html

Descripción

El evento popstate se produce cada vez que hay un cambio en la navegación sobre el historial del navegador.

Para podernos mover por el historial se tiene que haber cargado con información mediante el método history.pushState() o el método history.replaceState().

En el atributo state del evento nos vendrá información sobre el estado del historial al que nos hayamos movido.

Sintaxis

<body onpopstate="funcion(event)"></body>

Elemento Padre

body

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Evento Estados History API</title>

</head>
<body>

<h1>Evento Estados History API</h1>
<p> Prueba a moverte por el historial con los botones de back y forward.</p>

<article>
  <h2>Salida</h2>
  <div id="salida"></div>
</article>

<script>

  var consola = document.getElementById("salida");
  function escribir(texto) {
    actual = consola.innerHTML
    consola.innerHTML = actual + "<br>" + texto;
  }

  window.onpopstate = function(event) {
      escribir("Te has desplazado a " + JSON.stringify(event.state));
    };

  history.pushState({ pagina: "1" }, "Titulo 1", "history-states-event.html#p1");
  escribir("Hemos añadido el estado " + JSON.stringify(history.state));

  history.pushState({ pagina: "2" }, "Titulo 2", "history-states-event.html#p2");
  escribir("Hemos añadido el estado " +  JSON.stringify(history.state));

  escribir("El número de estados es de " + history.length);

</script>

</body>
</html>

Artículos

Manual HTML

Aprende más sobre HTML consultando online o descargando nuestro manual.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Vídeos HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.