web-dev-qa-db-fra.com

le bouton Précédent du navigateur ne fonctionne pas correctement après l'utilisation de PushState (sous Chrome).

J'utilise ce type de ligne dans une réponse JS

if (history && history.pushState){
     history.pushState(null, null, '<%=j home_path %>');
}

mais lorsque je clique sur back dans le navigateur, le code JS de la réponse est affiché à la place de la page précédente.

Existe-t-il un moyen de faire fonctionner le bouton Précédent de manière à ce qu'il demande à nouveau la page de la dernière URL (avant home_path comme pushStated dans?)?

Mise à jour :

J'ai trouvé ceci .. il semble que d'autres aient le même problème avec .. History.js ne le répare pas

Donc, pour confirmer certains des commentaires là-bas .. Cela se produit uniquement en chrome

Ce que je pense

Je pense que la racine de tout cela est que le popstate demande le même type de document pushstate (réponse js). Ce qui doit être fait est sur demande popstate la réponse HTML .. Je ne sais pas comment

Plus de mises à jour:

voir http://railscasts.com/episodes/246-ajax-history-state il mentionne utiliser

 $(window).bind("popstate", function() {
      $.getScript(location.href);
    });

cela résout le problème mais selon comprendre jQuery $ .getScript () sans ajax le cache y ajoutera des horodatages .. qui polluent l’url .. le désactiver le fait ne plus fonctionner avec le même effet ..

Quelqu'un sait comment résoudre ce problème?

Encore plus de mises à jour

J'ai suivi les traces du problème tout au long de l'interweb et j'ai terminé avec un problème en chrome qui pointe vers un problème avec Rails (Firefox fonctionne cependant) et un problème avec dans Rails-ujs concernant l'inclusion de Vary Header dans les réponses

Exemple peut être trouvé ici

javascriptruby-on-rails-3google-chromebackpushstate
25
Nick Ginanto

Je joue actuellement avec faire

 response.headers['Vary'] = 'Accept'

qui semble résoudre le problème, à première vue.

Si quelqu'un a le même problème, s'il vous plaît vérifier et faites le moi savoir

12
Nick Ginanto

Vous devez ajouter un auditeur à l'événement popstate

window.onpopstate = function(event) {
    //load the page
};

Lorsque le bouton Précédent est enfoncé, l'URL est modifiée, puis l'événement Popstate est déclenché. Il est de votre responsabilité de charger dans votre écouteur Popstate les détails correspondant à l'URL modifiée.

Un bel exemple popstate

Certains navigateurs déclenchent un événement popstate lors du premier chargement de la page, ce qui provoque une boucle de chargement de page infinie. Ceci peut être évité en ajoutant le contrôle suivant

var loadPage = window.history.state;
window.onpopstate = function(event) {
    if (loadPage) 
        //load the page
};

Puis définissez la loadPage sur true lorsque pushState est appelé

history.pushState(null, null, '<%=j home_path %>');
loadPage = true;

Cette technique fonctionne dans tous les navigateurs qui prennent en charge l’application Historique HTML 5.

7
graham mendick

C'est arrivé avec sinatra et chrome. 

Résolu avec:

$.ajaxSetup({ cache: false });
2
trompa

J'ai testé ce code sur mon navigateur en utilisant un fichier HTML local et j'ai eu une erreur de sécurité de la console:

SecurityError: The operation is insecure.
  history.pushState(null, null, '<%=j home_path %>');

Je peux voir à quel point la manipulation de l'historique du navigateur peut être considérée comme un comportement potentiellement dangereux. Par conséquent, vous devriez vérifier que cela ne se produit pas pour vous également. Essayez d’utiliser la console Javascript Firebug. Il est également possible qu'il existe des différences de comportement entre les fichiers locaux et http: // HTML.

Cela dit, pour ce que j'ai vu, le dernier élément du tableau history est fondamentalement la page en cours, donc si vous voulez changer le précédent, vous pouvez le faire en utilisant deux commandes pushState () - vous devez d'abord appuyer sur l'élément précédent que vous désirez, alors vous repoussez le chemin actuel. Si j'ai bien compris votre problème.

0
Okarin