2011-10-14 12 views
11

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.conservando la funcionalidad del botón "atrás" del navegador utilizando AJAX/jQuery para cargar páginas y el método history.pushState()

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.

+0

Solo una pequeña cosa - 'Var' tiene que ser' var'. – pimvdb

+0

gracias pimvdb! acabo de editar la pregunta, -tim –

Respuesta

12

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().

+1

¡Es un excelente complemento para jQuery! ¡¡Gracias!! –

+0

enlace de demostración roto – carefulnow1

11

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) 
}; 
+0

impresionante Anton, gracias, eso es exactamente lo que necesitaba! Ahora me doy cuenta de qué pasa con el botón "avanzar" del navegador? ¿Hay alguna forma de controlar eso con el método jQuery load()? Cuando hago clic en el botón Avanzar después de hacer clic en el botón Atrás, como es lógico, no vuelve a cargar la página que acabo de navegar, gracias, -tim –

+0

popstate también se dispara cuando se presiona el botón Adelante. –

+1

hola Anton, ¿cómo discernir luego entre el botón de atrás y adelante? ¿Existe algún tipo de if()/else que pueda hacer si el usuario hace clic atrás o hacia adelante? ¡Gracias! -tim –

Cuestiones relacionadas