HTML5 onpopstate en la página carga

Question

Estoy utilizando el nuevo evento HTML5 onpopstate. Con Firefox 4, el evento window.onpopstate se desencadena en una página cargada, mientras que en Webkit no parece ser el caso.

¿Cuál es el comportamiento correcto?

Answer 1

El evento de estado emergente se activa en ciertos casos cuando se navega a una entrada del historial de la sesión.

http://www.whatwg.org/specs/web-apps/current-work/#event-popstate

Desde mi entender, aunque podría estar equivocado, ya que la carga de la página Qué significa la historia se crea y atravesó a, sí, debe ser despedido al cargar la página.

Véase también,

http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19722.html

y,

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

Firing onpopstate al cargar la página es correcta, y WebKit tendrá este comportamiento pronto. WebKit 534.7 (Chrome 7.0517.44) ahora se comporta de esta manera.

He archivado una falla de Chrome, pero resulta que este es el comportamiento deseado; es necesario para manejar ciertas acciones del botón atrás/adelante correctamente. Ver this bug report at code.google.com para más discusión y enlaces.

Todavía estoy tratando de llegar a un buen patrón de código para un controlador de eventos onpopstate.

Answer 3

No sé si es esto lo que están pidiendo, pero mi solución para una única ajax- controlador de eventos onpopstate es la creación de una variable truerefreshed en window.onload y ponerlo a false en history.pushState llamadas; luego, en el controlador onpopstate simplemente haga las cosas si refreshed es false.

Parece tonto, y lo es, pero no pude hacer nada mejor.

Answer 4

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 en la carga de la página, pero Firefox no lo hace.

Esta cita fue tomada de la documentación de Mozilla: https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate

tiendo a estar de acuerdo con el sistema de Mozilla. La carga de página no es una acción que requiere que se active un evento de estado emergente adicional, porque el estado no se está copiando, se está cargando por primera vez.

Supongo que Webkit lo está haciendo por conveniencia ... en todas mis implementaciones, consistentemente es un inconveniente retrasar la carga de mi controlador hasta después de que el estado emergente inicial se haya disparado.

En lugar de esto (usando funciones pseudo):

AddEventHandler(window, 'popstate', OnPopState); 

que tienen que hacer algo como esto:

AddLoadEvent(window.setTimeout(function() 
    { 
     AddEventHandler(window, 'popstate', OnPopState); 
    },0)); 

Answer 5

acabamos de resolver este problema, y ​​la solución es muy simple. Firefox no activa onpopstate en la carga de la página inicial. Después de disparar un estado emergente, devuelve falso o evita el valor predeterminado en la acción page.load y estás dorado.

Saludos.

en acción aquí: www.thecoffeeshopnyc.com

// Write in a new handler for Firefox, which does not fire popstate on load. 
// Modern Webkit browsers fire popstate on load. The event handler below fires the controller 
$(window).load(function() { 
    if ($.browser.mozilla) { 
     // Your func. 
    } 
}) 

// Add the event listener. If the above is false, it will still run as intended in normal browsers. 
window.onpopstate = function() { 
    // Your func. 
} 

Answer 6

En caso de que alguien le interesa, he acercó con un patrón decente para trabajar con onpopstate (este código se supone jQuery, comprobaciones de detección de función son despojados para mayor claridad):

$(function() { 

    // 1. Add initial state to current history record on page load. 
    var href = location.href; 
    history.replaceState({"href": href}, null, href); 

    // 2. Now attach the popstate handler. 
    window.onpopstate = function(ev) { 

    // Raised on page load this event will still contain no state. 
    var state = ev.state; 
    if (state && state.href) { 

     // 3. Add your logic, use `state` and `state.href` as you see fit.   

    } 
    }; 

});