2012-01-23 7 views
45

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?

+0

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

+0

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

+0

El comentario de bennedich a continuación me ayudó mucho. Sería bueno aceptarlo para que también ayude más eficazmente a otros. –

Respuesta

51

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.
+11

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

+12

@frontendbeauty Creo que debe publicar su propuesta como respuesta con un fragmento de código. – andi

+1

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 –

Cuestiones relacionadas