Solución:
Compruebe la verdad booleana de event.state en popstate controlador de eventos:
window.addEventListener('popstate', function(event) {
if (event.state) {
alert('!');
}
}, false);
Para asegurarse de que esto funcione, siempre especificar un nonull argumento de estado al llamar history.pushState() o history.replaceState(). Además, considere usar una biblioteca contenedora como History.js que proporciona un comportamiento coherente en todos los navegadores.
Tuve un problema similar y tuve que validar para asegurarme de que la página se cargó por completo.
Usé algo como esto:
var page_loaded = false;
window.onpopstate = function(event){
if(!page_loaded){
page_loaded = true;
return false;
}
//Continue With Your Code
}
Para reaccionar en popstate evento, debe insertar algún estado en el historial de la sesión.
Por ejemplo, agregue esta línea a la sección de documento listo:
history.pushState(null, null, window.location.pathname);
No es ideal, pero también funciona en Chrome, Firefox y otros navegadores.
Entonces el evento se dispara correctamente cuando el usuario hace clic en atrás o Hacia adelante botón, también cuando history.back(), history.forward(), history.go() los métodos se llaman manualmente. Cada vez que popstate se ha invocado, debe presionar otro estado nuevamente para que funcione.
Ver también:
- Aplicaciones de una sola página y pushState HTML5
- Cómo detectar el evento del botón Atrás del navegador – Navegador cruzado