2011-06-10 12 views
14

Tengo un problema con la siguiente situación.Volviendo a una entrada de pushState que utilizó ajax

  1. visitas de los usuarios del sitio
  2. El usuario hace clic enlazan history.pushState que utiliza para actualizar la URL
  3. contenido de la página parcial cargado a través de AJAX (jQuery)
  4. usuario hace clic en enlace regular que carga una nueva página
  5. usuario hace clic en Atrás para volver a la entrada pushState
  6. la página ahora muestra sólo la parte de la página que se recuperará a través de ajax

He creado un sitio usando pushState para varias cosas y el resultado es una aplicación web sorprendentemente receptiva, pero este problema me impide usar esto.

Aquí está un ejemplo del código:

$('a').live('click', function(){ 
    history.pushState({}, '', this.href); 
    popstate(this.href); 
    return false; 
}); 

popstate = function(url){ 
    $('#content').load(url); 
} 
window.onpopstate = function(event){ 
    popstate(window.location.href); 
    event.preventDefault(); 
} 

Notas:

  • Al colocar una alerta en la función window.onpopstate parece que el evento no se activa en el paso 5. ¿Es esta ¿un insecto?
  • El problema solo ocurre cuando se usa ajax.
  • Tuve que separar la función de estado emergente para poder llamarla después de pulsar Estado. ¿Hay alguna manera de activar manualmente el evento window.onpopstate?

Respuesta

18

Parece que algunos navegadores a menudo confunden la carga parcial a través de ajax y toda la página, decorada con su diseño. Eso es porque ambos tienen la misma URL. Así que cuando el usuario hace clic en el botón Atrás, el navegador no cargará la URL y solo mostrará el parcial que ha descargado previamente a través de ajax.

Para evitar esto y mantener dos cachés internos separados (uno para la página parcial y otro para toda la página), debe agregar un parámetro GET en la URL al llamar a través de ajax. Me gusta esto en su código:

popstate = function(url){ 
    $('#content').load(url+'?_ajax=1'); 
} 

Espero que esto ayude.

+0

Esto fue extremadamente útil, para mí esto fue extremadamente confuso. ¿Creo que otra solución podría estar cambiando el tipo de contenido? Pero no estoy seguro, creo que es mejor que las URL ajax sean diferentes a la url real después de todo. – Emiel

+0

¡Muchas gracias! Pensé que tenía otro problema, aparentemente resuelto por el siguiente enlace. Nada parecía funcionar 'hasta que encontré esta solución simple. http://stackoverflow.com/questions/6421769/popstate-on-pages-load-in-chrome –

Cuestiones relacionadas