javascript - event - window history clear

window.onpopstate en la carga de la página

Question

Estoy jugando con window.onpopstate , y hay algo que me molesta un poco:

Los navegadores tienden a manejar el evento popstate de forma diferente en la carga de la página. Chrome y Safari siempre emiten un evento de estado emergente al cargar la página, pero Firefox no lo hace.

source

Lo probé, y sí, en Chrome y Safari 5.1+, el evento popstate se activa en la carga de la página, pero no en Firefox o IE10.

El problema es que quiero escuchar solo eventos popstate donde el usuario hizo clic en el botón Atrás o Adelante (o el historial se modificó mediante javascript), pero no quiere hacer nada en la carga de la página.

En otras palabras, quiero diferenciar el evento de estado popstate de la carga de página de los otros eventos de estado popstate .

Esto es lo que intenté hasta ahora (estoy usando jQuery):

$(function() {
  console.log(''document ready'');

  setTimeout(function() {
    window.onpopstate = function(event) {
      // Do something here
    }, 10);
});

Básicamente, trato de vincular mi función de listener a popstate suficiente antelación para que no esté vinculada a la carga de la página, solo más tarde.

Esto parece funcionar, sin embargo, no me gusta esta solución. Quiero decir, ¿cómo puedo estar seguro de que el tiempo de espera elegido para setTimeout es lo suficientemente grande, pero no demasiado grande (porque no quiero que espere demasiado).

¡Espero que haya una solución más inteligente!

Answer 1

Para reaccionar en popstate evento de estado popstate , debe presionar algún estado en el historial de la sesión.

Por ejemplo, agregue esta línea a la sección lista para documentos:

history.pushState(null, null, window.location.pathname);

No es ideal, pero también funciona en Chrome, Firefox y otros navegadores.

Luego, el evento se dispara correctamente cuando el usuario hace clic en el botón Atrás o Adelante , también cuando se history.back() manualmente los métodos history.back() , history.forward() , history.go() . Cada vez que se ha invocado el estado popstate , debe presionar otro estado nuevamente para que funcione.

Ver también:

• Aplicaciones de una sola página y HTML5 pushState
• Cómo detectar el evento del botón Atrás del navegador - Navegador cruzado

Answer 2

Tuve un problema similar y tuve que validar para asegurarme de que la página se cargara 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
}

Answer 3

Verifique la verdad booleana de event.state en el controlador de eventos popstate :

window.addEventListener(''popstate'', function(event) {
    if (event.state) {
        alert(''!'');
    }
}, false);

Para asegurarse de que esto funcione, siempre especifique un argumento de estado no null cuando llame a history.pushState() o history.replaceState() . Además, considere usar una biblioteca contenedora como History.js que proporciona un comportamiento consistente en los navegadores.