Estoy desarrollando una página web en la que dependiendo de las acciones siguientes o posteriores hago la animación correspondiente, el problema surge cuando uso el estado de empuje. Cuando recibo el evento, ¿cómo sé si el usuario hizo clic atrás o hacia adelante en los botones de historial usando la API de Pushstate ?, o ¿tengo que implementar algo por mi cuenta?¿Cómo puedo recuperar si el evento popstate proviene de acciones de retroceso o avance con el estado push HTML5?
Respuesta
Debe implementarlo usted mismo, que es bastante fácil.
- Al invocar
pushState
, otorgue al objeto de datos un ID de incremento único (uid). - Cuando se invoca el controlador
onpopstate
; compruebe el uid de estado contra una variable persistente que contiene el último uid de estado. - Actualice la variable persistente con el uid de estado actual.
- Realice diferentes acciones dependiendo de si el uid de estado fue mayor o menor que el último uid de estado.
Esto funciona bien cuando la jerarquía de página/vista está claramente definida, y siempre es cierto que una página determinada viene después de otra. Cuando la navegación puede ser más dinámica, no puede confiar en un UID creciente. He resuelto esto usando sessionStorage para mantener una pila de las últimas X páginas. Luego, en un evento de estado emergente, puede verificar la pila de sessionStorage para ver si la nueva URL de la página es la misma que la URL de la página N-2. Use sessionStorage en lugar de una variable normal, por lo que esto persiste entre los límites de la página. – frontendbeauty
@frontendbeauty Creo que debe publicar su propuesta como respuesta con un fragmento de código. – andi
además, en lugar de verificar si el valor es mayor/menor, puede escribir un administrador de cambio de estado que verifique el id para ver cuál es el estado actual y a qué estado se muda, luego haga la animación correspondiente –
- 1. history.pushState no desencadena evento 'popstate'
- 2. Utilizando los botones de avance y retroceso con la API Historia
- 3. ¿Cómo recuperar el compromiso desde 'estado de cabeza separada'?
- 4. HTML5/jQuery: pushState y popState - ¿enlace profundo?
- 5. ¿Cómo puedo saber si un evento proviene de la tecla Ctrl derecha?
- 6. ¿Detecta el retroceso y el del evento de "entrada"?
- 7. Cómo capturar un retroceso en el evento onkeydown
- 8. Combinar Estado con acciones IO
- 9. jQuery bind evento popstate no pasado
- 10. ¿Cómo puedo recuperar el número de filas eliminadas con PDO?
- 11. ¿Cómo atrapar el evento con el botón de retroceso de hardware en Android?
- 12. jquery - ¿Puedo recuperar (evento, xhr, opciones) desde .ajaxStart o .ajaxStop?
- 13. ¿Cómo puedo aceptar la tecla de retroceso en el evento de pulsación de tecla?
- 14. HTML5 sin conexión "Evento de error de caché de aplicación: Error al recuperar el manifiesto (-1)"
- 15. jquerymobile phonegap botón de retroceso obtener el estado anterior
- 16. Botón de retroceso de API de historial HTML5 con cargas de página parcial
- 17. Cómo detectar eventos de botones de avance y retroceso en Delphi?
- 18. ¿Cómo puedo recuperar registros actualizados en tiempo real? (notificaciones push?)
- 19. Cuando el botón Atrás activa popState, ¿cómo puedo evitar que una página se actualice?
- 20. ¿Cómo puedo determinar si se muestra un botón de retroceso?
- 21. Capturar evento clave para retroceso
- 22. Detectar si el historial HTML5 es compatible o no
- 23. El uso de una UIWebView con loadHTMLString/loadData rompe los botones de retroceso y avance, ¿solución alternativa?
- 24. Cómo borrar, eliminar o restablecer el estado de validación de formulario HTML5 después de "setCustomValidity (" ... ");"?
- 25. Historial de HTML5 que deshabilita el botón de reenvío
- 26. prevenir el desplazamiento durante el evento touchmove canvas de HTML5
- 27. evento de cambio no se activa cuando el cambio proviene de otra función
- 28. ¿Cómo comprobar si el navegador es compatible con HTML5?
- 29. Javascript: ¿Cómo puedo bloquear el carácter de retroceso?
- 30. ¿Cómo sé si la solicitud proviene de flash swf?
El evento popstate dice "cambie a este estado". Parece que supone que usted sabe en qué estado se encuentra actualmente y, por lo tanto, qué debe hacer para cambiar de estado. – Neil
El problema es que el historial es una pila, así que si tengo una lista y sigo adelante, adelante, adelante, atrás, adelante, atrás, adelante, y la lista es: [1,2,3,4,5] , la historia será: [1,2,3,4,3,4,3,4]. En números es fácil, pero con urls no es tan fácil saber qué url es el siguiente y cuál el anterior. – Davsket
El comentario de bennedich a continuación me ayudó mucho. Sería bueno aceptarlo para que también ayude más eficazmente a otros. –