web-dev-qa-db-de.com

zurück-Taste im Browser funktioniert nach der Verwendung von PushState nicht richtig (in Chrome)

Ich verwende diesen Leitungstyp in einer JS-Antwort

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

wenn ich jedoch im Browser auf back klicke, sehe ich anstelle der vorherigen Seite den JS-Code der Antwort.

Gibt es eine Möglichkeit, die Zurück-Schaltfläche zum Laufen zu bringen, so dass die Seite der letzten URL erneut aufgerufen wird (vor home_path als pushStated in)?

Update :

Ich habe this gefunden ... es scheint, dass andere das gleiche Problem mit .. History.js haben

Um einige der Kommentare dort zu bestätigen, geschieht dies nur in Chrom

Was ich denke

Ich denke, die Wurzel von all dem ist, dass der Popstate denselben Typ des Pushstate-Dokuments anfordert (Antwort von js). Was zu tun ist, ist auf popstate Anfrage die HTML-Antwort .. Ich weiß nur nicht wie

Weitere Updates:

see http://railscasts.com/episodes/246-ajax-history-state es erwähnt zu verwenden

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

dies löst das Problem, aber nach Verstehen von jQuery $ .getScript () ohne Ajax-Caching werden Zeitstempel hinzugefügt. Dadurch wird die URL verschmutzt. Wenn Sie sie deaktivieren, funktioniert sie nicht mehr mit dem gleichen Effekt.

Weiß jemand, wie man das löst?

Noch mehr Updates

Ich habe die Spuren des Problems im gesamten Internet verfolgt und mit einem Problem in Chrome beendet, das auf ein Rails-Problem (Firefox funktioniert gut) und ein Problem in Rails-Ujs ohne Vary Header hinweist in den Antworten

Beispiel kann gefunden werden hier

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

Ich spiele gerade mit machen

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

das scheint das Problem auf den ersten Blick zu lösen.

Wenn jemand das gleiche Problem hat, überprüfen Sie es bitte und lassen Sie es mich wissen

12
Nick Ginanto

Sie müssen dem Popstate-Ereignis einen Listener hinzufügen

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

Wenn die Zurück-Taste gedrückt wird, wird die URL geändert und das Popstate-Ereignis wird ausgelöst. Es liegt in Ihrer Verantwortung, die Details in Ihren Popstate-Listener zu laden, die der geänderten URL entsprechen.

Ein schönes Popstate-Beispiel

Einige Browser lösen ein Popstate-Ereignis aus, wenn die Seite zum ersten Mal geladen wird, was zu einer unendlichen Seitenladeschleife führt. Dies kann durch Hinzufügen der folgenden Prüfung vermieden werden

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

Setzen Sie dann die loadPage auf true, wenn pushState aufgerufen wird

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

Diese Technik funktioniert in allen Browsern, die HTML-History-API unterstützen.

7
graham mendick

Es ist mein mit Sinatra & Chrom passiert. 

Gelöst mit:

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

Ich habe diesen Code in meinem Browser mit einer lokalen HTML-Datei getestet und einen Konsolensicherheitsfehler erhalten:

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

Ich kann sehen, wie das Manipulieren des Browserverlaufs als potenziell gefährliches Verhalten angesehen werden kann. Ich denke, Sie sollten also prüfen, ob dies auch für Sie nicht der Fall ist. Versuchen Sie es mit der Firebug-Javascript-Konsole. Es ist auch möglich, dass sich das Verhalten zwischen lokalen und http: // HTML-Dateien unterscheidet.

Das letzte Element des history-Arrays ist im Grunde die aktuelle Seite. Wenn Sie also die vorherige Seite ändern möchten, können Sie dies mit zwei pushState () - Befehlen tun - zuerst drücken Sie das vorherige Element dass Sie wünschen, dann drücken Sie den aktuellen Pfad erneut. Wenn ich dein Problem richtig verstanden habe.

0
Okarin