Cuando el botón Atrás activa popState, ¿cómo puedo evitar que una página se actualice?

Question

Estoy tratando de modificar el contenido en mi página sin una recarga. Actualmente mi código lee:

window.onpopstate = function(event){ 
    // Ajax Request the Page and replace content with new content 
}; 

Esto funciona cuando empujo un estado y dispare el evento popstate, pero si presiono el botón Atrás en el navegador que navega a la URL en lugar de llamar a mi evento onpopstate. ¿Cómo puedo evitar que una página se actualice y actualice la página con mi llamada ajax?

editar: Estoy tratando de actualizar con pushState y popstate. Esperaba mantener mis URL libres de hash.

Answer 1

Usted tiene que asegurarse de que siempre hay un estado de historia que' he presionado desde la página actual en el historial para evitar que el botón Atrás realice una carga de página.

Si intenta mantener al usuario "contenido" en su aplicación web para que el botón Atrás siempre proporcione algún tipo de función, debe presionar al menos dos estados en la pila y luego asegurarse de presionar otro estado desde tu manejador de popstate.

var foo = {foo: true}; // state object 
history.pushState(foo, "unused argument", "#newInitialUri"); 
... 
var bar = {bar: true} 
history.pushState(bar, "unused argument", "#newStateOfWebApp"); 
... 
window.onpopstate = function(event){ 
    ... 
    var baz = {baz: true} 
    history.pushState(baz, "unused argument", "#baseState"); 
}; 

En el ejemplo anterior digamos que hemos cargado '/'. El script comienza a ejecutarse y el URI de la ventana del navegador cambia a '/ # newInitialUri', pero no se carga la página. Luego, inmediatamente después, el URI del navegador cambia a '/ # newStateOfWebApp' y no se carga la página.

El usuario presiona el botón Atrás en su navegador. Tu manejador de popstate dispara. Durante su controlador, event.state es igual a foo y el navegador uri es '/ # newInitialUri'. No se carga la página. El manejador termina de completar, llamando a history.pushState y ahora el navegador uri es '/ # baseState'. No se carga la página. Si el usuario vuelve a hacer clic, su evento popstate volverá a activarse, event.state será igual a foo (nuevamente), el URL del navegador será '/ # newInitialUri' (sin carga de página) y luego será '/ # baseState' de nuevo (sin carga de página).

Lo importante a recordar es que el event.state en el controlador popstate siempre contiene el objeto de estado para el URI que acaba de volver a , no el que acaba de llegar de . Esto fue confuso para mí al principio, pero tuvo sentido cuando lo pensé. Por ejemplo, el usuario puede haber regresado a su página luego de haber ido a Google. El objeto de estado es su oportunidad de comunicar el estado de su aplicación a su código.

Tenga en cuenta que algunos navegadores activan el evento de estado emergente en la carga de la página (que es lo que se supone que debe suceder de acuerdo con la especificación que yo entiendo). Asegúrese de verificar su objeto de estado en su controlador antes de ejecutar su código para asegurarse de no ejecutar código que no tiene la intención de cargar en una página.

Una última nota: si está utilizando jQuery para manejar eventos, necesitará usar event.originalEvent.state para referirse al objeto de estado.

Answer 2

This puede ayudar a

El evento unload se envía al elemento de ventana cuando el usuario se desplaza fuera de la página. Esto podría significar una de muchas cosas. El usuario podría haber hecho clic en un enlace para salir de la página, o escribir una nueva URL en la barra de direcciones. Los botones de avance y retroceso activarán el evento. Cerrar la ventana del navegador hará que se desencadene el evento. Incluso una recarga de página creará primero un evento de descarga.

Referencia

http://api.jquery.com/unload/

no probado

$(window).unload(function(e){  
     e.preventDefault(); 
     $(window).trigger('popstate ');  

    });  

    $(window).bind('popstate ',function(){ 

    //your ajax call here 
    }); 

y finalmente aquí es un DEMO clic en el botón atrás del navegador para ver su funcionamiento

actualización

que está a la derecha del descarga ser cancelada pero se puede hacer algo como

$(window).unload(function(e){ 
    e.preventDefault(); 
    $(window).trigger('beforeunload'); 

}); 


$(window).bind('beforeunload',function(){ 

alert('call your ajax here'); 
    return ''; 
}); 

yet another DEMO