Ejemplo de evento Dom Window.popstate

los popstate evento de la Window La interfaz se activa cuando la entrada del historial activo cambia mientras el usuario navega por el historial de la sesión. Cambia la entrada del historial actual a la de la última página que visitó el usuario o, si history.pushState() se ha usado para agregar una entrada de historial a la pila de historial, esa entrada de historial se usa en su lugar.

La pila de historia

Si la entrada del historial que se está activando fue creada por una llamada a history.pushState() o fue afectado por una llamada a history.replaceState(), los popstate eventos state La propiedad contiene una copia del objeto de estado de la entrada del historial.

Estos métodos y sus eventos correspondientes se pueden usar para agregar datos a la pila de historial que se pueden usar para reconstruir una página generada dinámicamente, o para alterar el estado del contenido que se presenta mientras permanece en el mismo Document.

Tenga en cuenta que solo llamando history.pushState() o history.replaceState() no activará un popstate evento. los popstate El evento se activará al realizar una acción en el navegador, como hacer clic en el botón de retroceso o avance (o llamar history.back() o history.forward() en JavaScript).

Los navegadores tienden a manejar popstate evento de manera diferente en la carga de la página. Chrome (antes de v34) y Safari siempre emiten un popstate evento en la carga de la página, pero Firefox no.

Nota: Al escribir funciones que procesan popstate caso es importante tener en cuenta que propiedades como window.location ya reflejará el cambio de estado (si afectó a la URL actual), pero document puede que todavía no. Si el objetivo es captar el momento en que el nuevo estado del documento ya está completamente en su lugar, un retraso cero setTimeout() La llamada al método debe usarse para poner de manera efectiva su llamar de vuelta función que realiza el procesamiento al final del bucle de eventos del navegador: window.onpopstate = () => setTimeout(doSomeThing, 0);

Cuando se envía popstate

Cuando se produce la transición, ya sea debido a que el usuario activa el botón “Atrás” del navegador o de otra manera, el popstate El evento está cerca del final del proceso de transición a la nueva ubicación. Ocurre después de que la nueva ubicación se haya cargado (si es necesario), mostrado, hecho visible, etc., después de que pageshow se envía el evento, pero antes de que se restaure la información de estado de usuario persistente y hashchange se envía el evento.

Para entender mejor cuando el popstate evento se dispara, considere esta secuencia simplificada de eventos que ocurre cuando la entrada actual del historial cambia debido a que el usuario navega por el sitio o el historial se recorre mediante programación. Aquí, la transición está cambiando la entrada del historial actual a una a la que nos referiremos como nueva entrada. La entrada de la pila del historial de sesiones de la página actual se denominará entrada actual.

1. Si nueva entrada no contiene actualmente un Document, recupera el contenido y crea su Document Antes de continuar. Esto eventualmente enviará eventos como DOMContentLoaded y load al Window que contiene el documento, pero los pasos a continuación continuarán ejecutándose mientras tanto.
2. Si entrada actualEl título de la API no se estableció mediante uno de los métodos de la API de historial (pushState() o replaceState(), establezca el título de la entrada en la cadena devuelta por su document.title atributo.
3. Si el navegador tiene información de estado que desea almacenar con el entrada actual antes de alejarse de él, lo hace. Ahora se dice que la entrada tiene “estado de usuario persistente”. Esta información que el navegador puede agregar a la entrada de la sesión del historial puede incluir, por ejemplo, la posición de desplazamiento del documento, los valores de las entradas del formulario y otros datos similares.
4. Si nueva entrada tiene un diferente Document objeto que entrada actual, el contexto de navegación se actualiza para que su document propiedad se refiere al documento al que hace referencia nueva entrada, y el nombre del contexto se actualiza para que coincida con el nombre del contexto del documento actual.
5. Cada control de formulario dentro nueva entrada‘s Document que tiene autocomplete configurado con su nombre de campo de autocompletar establecido en off se reinicia. Ver El atributo de autocompletar HTML para obtener más información sobre los nombres de campo de autocompletar y cómo funciona el autocompletado.
6. Si nueva entradaEl documento ya está completamente cargado y listo, es decir, su readyState es complete—Y el documento aún no está visible, se hace visible y el pageshow evento se dispara en el documento con el PageTransitionEvent‘s persisted atributo establecido en true.
7. Los documentos URL se establece en el de nueva entrada.
8. Si el recorrido histórico se realiza con el reemplazo habilitado, la entrada inmediatamente antes de la entrada de destino (teniendo en cuenta el delta parámetro en métodos como go()) se elimina de la pila de historial.
9. Si el nueva entrada no tiene un estado de usuario persistente y el fragmento de su URL no esnull, el documento se desplaza hasta ese fragmento.
10. Próximo, entrada actual se establece en nueva entrada. La entrada de destino ahora se considera actual.
11. Si nueva entrada ha serializado la información de estado guardada con él, esa información se deserializa en History.state; de lo contrario, state es null.
12. Si el valor de state cambiado el popstate El evento se envía al documento.
13. Cualquier estado de usuario persistente se restaura, si el navegador decide hacerlo.
14. Si la entrada original y la nueva compartieron el mismo documento, pero tenían diferentes fragmentos en sus URL, envíe el hashchange evento a la ventana.

Como puede ver, el popstate El evento es casi lo último que se hace en el proceso de navegar por las páginas de esta manera.

Ejemplos de

Una página en http://example.com/example.html ejecutar el siguiente código generará registros como se indica:

window.addEventListener('popstate', (event) => {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null"
history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"

El mismo ejemplo usando el onpopstate propiedad del controlador de eventos:

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null"
history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"

Tenga en cuenta que aunque la entrada del historial original (para http://example.com/example.html) no tiene ningún objeto de estado asociado, un popstate El evento aún se dispara cuando activamos esa entrada después de la segunda llamada a history.back().

Especificaciones

Compatibilidad del navegador

Ver también

• Manipular el historial del navegador (la API de historial)
• Ventana: hashchange evento