Retour en mouvement à une entrée de pushState qui utilisé ajax

Question

Je vais avoir un problème avec la situation suivante.

1. Visites de l'utilisateur site
2. L'utilisateur clique sur le lien qui utilise history.pushState pour mettre à jour l'url
3. contenu de la page partielle chargée via Ajax (en utilisant jQuery)
4. L'utilisateur clique lien régulier qui charge une nouvelle page
5. L'utilisateur clique sur retour pour revenir à l'entrée pushState
6. La page affiche maintenant la page partielle qui a été récupéré via ajax

J'ai Souped un site en utilisant pushState pour diverses choses et le résultat est une application web scandaleusement réactif, mais cette question me empêche d'utiliser cela.

Voici un exemple du code:

$('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();
}

Notes:

• Lorsque vous placez une alerte dans la fonction window.onpopstate il semble que l'événement ne se déclenche pas à l'étape 5. Est-ce un bug?
• Le problème se produit uniquement lorsque ajax est utilisé.
• J'ai dû séparer la fonction de popstate pour que je puisse l'appeler après pushState. Est-il possible de déclencher manuellement l'événement window.onpopstate?

Answer 1

Il semble que certains navigateurs confondent souvent la charge partielle par ajax et la page entière, décorée avec sa mise en page. C'est parce qu'ils ont tous deux la même URL. Ainsi, lorsque l'utilisateur clique sur le bouton de retour, le navigateur ne chargera pas l'URL et affichera simplement la partie, il a déjà téléchargé via ajax.

Pour éviter cela et maintenir deux caches internes séparées (une pour la page partielle et une pour la page entière), vous devez ajouter un paramètre GET dans l'URL lors de l'appel via ajax. Comme dans votre code:

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

Hope this helps.