conservando la funcionalidad del botón "atrás" del navegador utilizando AJAX/jQuery para cargar páginas y el método history.pushState()

Question

Me gustaría conservar la funcionalidad del botón Atrás al cargar páginas mediante AJAX (método jQuery load) y presionar la URL al barra del navegador a través del método history.pushState. El problema ocurre cuando uno hace clic en el botón Atrás del navegador y el primer clic solo restaura la URL anterior pero no carga la página anterior.

Aquí está mi código hasta ahora:

$(function(){ 
    var profile_url= "/profile"; 
    $('#click_button').click(function(){ 
     $('#main_content').load(profile_url); 
     history.pushState({profile:profile_info}, "profile", profile_url); 
    }); 
}); 

Mi pregunta es ¿hay alguna manera de hacer una carga AJAX de la página anterior en el #main_content div en la primera clic del botón de retroceso?

Cualquier ayuda/consejo sería muy apreciada.

Answer 1

me gustaría dirigir a todos a un plugin de jQuery llamado PJAX que logra lo que era en última instancia interesado en hacer esta pregunta. Pjax() combina jQuery AJAX y pushState para cargar páginas y preservar el historial del navegador.

Aquí está the code, y aquí hay un nice demo de pjax() en acción.

Es realmente genial y fácil de usar, en la demostración, simplemente recuerde hacer clic en la casilla que está allí para ayudar a demostrar la funcionalidad de pjax().

Answer 2

Puede utilizar el evento popstate para este fin. Vea https://developer.mozilla.org/en/DOM/window.onpopstate para más detalles.

También eche un vistazo a History.js que proporciona un contenedor y puede recurrir a hashtags de URL en caso de que el navegador no admita la API de historial.

Answer 3

Para esto, necesita suscribirse al evento 'popstate'.

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

Usted puede hacer esto de esta manera:

window.onpopstate = function() { 
    $('#main_content').load(location.href) 
};