2011-11-21 11 views
5

Comencé a probar History.js. Después de entender cómo funciona y que no hay popstate, en su lugar hay statechange. Estoy buscando una manera de diferir cuando se ha presionado el botón Atrás del navegador.¿Hay alguna forma en History.js de saber cuándo se presionó el botón Atrás?

La razón es que necesito saber la URL antes de mover el estado, del que voy a ir. Con el gist que incluye el proyecto, solo se mira la URL que visitamos.

Espero que la solución no sea seguir la última URL visitada en una variable global.

Gracias

Respuesta

4

Sé que esto es una pregunta bastante anticuado, pero me subieron a una solución a los problemas con el botón de retroceso/avance cuando se cambia de una página estándar y una página de la historia del estado.

Escenario: Uso Historia HTML5 (o history.js plug-in) en un conjunto de páginas Luego otras páginas que necesitamos cargas reales, también conocido como una página estándar (no preguntes por qué, pero hay ciertos casos de uso que esta puede ser necesario)

Cuando se pasa de una página de estado de historial y se carga realmente a una página estándar. No puede regresar: cambia la url, pero no carga la página; solo activa un cambio de estado; que supongo que es el problema de la publicación original. Mi opinión personal es que este es un error del navegador (sin embargo, todos los navegadores tienen el problema), porque el navegador debe saber que la página en la que se encuentra se recargó fuera de la página Estado del historial.

Solucioné esto con algo realmente simple: Escuchando el evento statechange y le digo al navegador que actualice cuando se dispare. De esta forma, no me importa si retroceden o vuelven a salir de esta página. Si el navegador piensa que el estado está cambiando (los enlaces no desencadenan el evento de cambio de estado), solo retroceder/avanzar INTO a una página de estado de Historial desencadena este evento, por lo que resuelve el problema.

Código, usando jQuery + History.js plugin:

$(window).on('statechange', function() { 
    window.location.reload(); 
}); 

Si esto no tiene sentido, es probable que no tener este problema. Sin embargo, he notado que en muchos sitios que hacen usan HTML 5 History (incluso pinterest.com tiene este problema si vuelves a cargar en una imagen modal y luego tratas de regresar).

Con suerte, si usted tiene este problema, podrás encontrar esta respuesta y tienen un gran suspiro de alivio :)

+2

Había pensado en lógica similar, sin embargo, el cambio de estado se activa cuando se presiona pushState y cuando se presiona atrás/adelante, lo que crea un ciclo de recarga infinito. – Dean

+0

De hecho, un gran alivio. Estaba a punto de darme por vencido. –

17

He encontrado las soluciones en GitHub a ser un poco exagerada para mis propósitos. Creé un bool que siempre es cierto, excepto justo antes cuando usaba History para cambiar el estado.

var manualStateChange = true; 

History.Adapter.bind(window,'statechange',function(){ 
    if(manualStateChange == true){ 
    // BACK BUTTON WAS PRESSED 
    } 
    manualStateChange = true; 
}); 

Cada vez que cambia el estado de programación, ajuste el bool false:

manualStateChange = false; 
History.pushState(null, null, currentPath); 
+0

buen pensamiento ... – JDandChips

+1

Hice lo mismo, pero esto no diferenciará entre los botones 'atrás' y 'adelante'. – GTCrais

+0

Esto es exactamente lo que necesitaba, gracias: D ... Solo necesitaba 'location.reload()' en el bit '// BACK BUTTON PRESSED', por lo que 'back' y 'forward' no son una preocupación: D –

0

En la versión 'oficial' que esta característica no está disponible. Intente utilizar este archivo en el principal mientras: https://github.com/danger89/history.js/blob/master/scripts/bundled/html5/jquery.history.js

No puedo garantizar que su solución funcione para todos los navegadores. Pero es una buena solución. Si aplicó sus cambios, puede utilizar:

var State = History.getState(); 
if (State.navigation) { 
    // Back/forward button is pressed. 
} 

Más información se puede encontrar en Github issue 47.

0

Respuesta similar a la de James Wagoner. el evento 'statechange' se estaba disparando en ambos sentidos, así que en su lugar solo verifico un evento 'popstate', que en mi caso solo se llama cuando el usuario regresa.

window.addEventListener('popstate', function() { 
    window.location.reload(); 
}); 
Cuestiones relacionadas