Estoy tratando de modificar el contenido de mi página sin recargar. Actualmente mi código dice:
window.onpopstate = function(event){ // Ajax Request the Page and replace content with new content };Esto funciona cuando presiono un estado y luego activo 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 que se actualice una página y actualizar la página con mi llamada ajax?
editar: estoy tratando de actualizar con pushState y popstate. Esperaba mantener mis direcciones URL libres de hash.
Debe asegurarse de que siempre haya un estado de historial que haya enviado 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 para que el botón Atrás siempre proporcione algún tipo de función, debe enviar al menos dos estados a la pila y luego asegurarse de enviar otro estado desde su controlador 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 cargamos '/'. 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. Su controlador popstate se dispara. Durante su controlador, event.state es igual a foo y el uri del navegador es '/#newInitialUri'. No se produce la carga de la página. El controlador termina de completarse, llama a history.pushState y ahora el uri del navegador es '/#baseState'. No se produce la carga de la página. Si el usuario vuelve a hacer clic, su evento popstate se activará nuevamente, event.state será igual a foo (nuevamente), el uri del navegador será '/#newInitialUri' (sin carga de página) y luego será '/#baseState' nuevamente (sin carga de página).
Lo importante que debe recordar es que event.state en su controlador popstate siempre contiene el objeto de estado para el URI al que acaba de regresar, no el del que acaba de llegar. Esto fue confuso para mí al principio, pero tuvo sentido cuando lo pensé. Por ejemplo, es posible que el usuario haya regresado a su página después de haberse 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 debe suceder de acuerdo con la especificación según tengo entendido). 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 nota final: si usa jQuery para manejar eventos, deberá usar event.originalEvent.state para hacer referencia al objeto de estado.
esto puede ayudar
El evento de descarga se envía al elemento de la ventana cuando el usuario sale 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 active el evento. Incluso una recarga de página creará primero un evento de descarga.
Referencia
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 , haga clic en el botón Atrás del navegador para ver cómo funciona
actualizar
tienes razón, la descarga se cancelará, pero puedes hacer algo como
$(window).unload(function(e){ e.preventDefault(); $(window).trigger('beforeunload'); }); $(window).bind('beforeunload',function(){ alert('call your ajax here'); return ''; });