javascript - volver - pushstate jquery

Cuando el botón Atrás activa popState, ¿cómo puedo evitar una actualización de la página?

Question

Estoy tratando de modificar el contenido de 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 presiona un estado y luego desencadena el evento popstate, pero si presiono el botón Atrás en el navegador, navega a la URL en lugar de llamar a mi evento onpopstate. ¿Cómo puedo evitar una actualización de la página y actualizar la página con mi llamada ajax en su lugar?

edición: estoy tratando de actualizar con pushState y popstate. Esperaba mantener mis URL libres de hash.

Answer 1

Debe asegurarse de que siempre haya un estado de historial que haya presionado desde la página actual en el historial para evitar que el botón Atrás realice una carga de página.

Si está tratando de mantener al usuario "contenido" en su aplicación web, de modo que el botón Atrás siempre proporciona algún tipo de función, debe insertar al menos dos estados en la pila y luego asegurarse de presionar otro estado desde su controlador de estado pop .

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 cargamos ''/''. El script comienza a ejecutarse y el URI de la ventana del navegador cambia a ''/ # newInitialUri'' pero no se produce una carga de página. Inmediatamente después, el URI del navegador cambia a ''/ # newStateOfWebApp'' y no se produce ninguna carga de página.

El usuario presiona el botón de retroceso en su navegador. Su controlador de estado pop se dispara. Durante su controlador, event.state es igual a foo y el uri del navegador es ''/ # newInitialUri''. No se produce carga de página. El controlador termina de completarse, llama history.pushState y ahora el uri del navegador es ''/ # baseState''. No se produce carga de página. Si el usuario vuelve a hacer clic, su evento popstate se activará nuevamente, event.state será igual a foo (otra vez), el uri del navegador será ''/ # newInitialUri'' (sin carga de página) y luego será ''/ # baseState'' nuevamente (sin carga de página).

Lo importante a recordar es que el estado event.state en su controlador de estado pop siempre contiene el objeto de estado para la URI a la que acaba de regresar, no de la que acaba de llegar. Esto me confundió al principio, pero tenía sentido cuando lo pensaba. Por ejemplo, el usuario puede haber regresado a su página después 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 popstate en la carga de la página (que es lo que se supone que suceda según las especificaciones de mi entendimiento). Asegúrese de verificar su objeto de estado en su controlador antes de ejecutar su código para asegurarse de que no ejecuta el código que no pretende cargar en una página.

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

Answer 2

This puede ayudar

El evento de unload se envía al elemento de ventana cuando el usuario navega 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 haber escrito 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

unload

no probado

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

    });    

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

   //your ajax call here 
    });

y, finalmente, aquí hay una DEMO clic en el botón de retroceso del navegador para verlo funcionar

actualizar

Tienes razón al cancelar la descarga, pero puedes hacer algo como

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

});


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

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

otra DEMO