Frage

Ich habe ein Problem mit der folgenden Situation.

  1. Benutzer besucht Site
  2. Der Benutzer klickt auf Link, der history.pushstate verwendet, um die URL zu aktualisieren
  3. Teilseiteninhalt über AJAX geladen (mit jQuery)
  4. Der Benutzer klickt auf den regulären Link, der eine neue Seite lädt
  5. Der Benutzer klickt zurück, um zum Pushstate -Eintrag zurückzukehren
  6. Die Seite zeigt nun nur die Seite, die über AJAX abgerufen wurde

Ich habe eine Site mit Pushstate für verschiedene Dinge aufgemotzt und das Ergebnis ist eine schockierend reaktionsschnelle Web -App, aber dieses Problem verhindert, dass ich dies benutze.

Hier ist ein Beispiel des 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();
}

Anmerkungen:

  • Wenn Sie eine Warnung in das Fenster platzieren.
  • Das Problem tritt nur dann auf, wenn Ajax verwendet wird.
  • Ich musste die Popstate -Funktion trennen, damit ich sie nach Pushstate aufrufen kann. Gibt es eine Möglichkeit, das Ereignis von Fenster zu auslösen.
War es hilfreich?

Lösung

Es scheint, dass einige Browser die teilweise über Ajax und die gesamte Seite geladene teilweise mit seinem Layout dekorierten Seite verwirren. Das liegt daran, dass beide die gleiche URL haben. Wenn der Benutzer auf die Schaltfläche zurück klicken, lädt der Browser die URL nicht und zeigt nur die teilweise an, die er zuvor über AJAX heruntergeladen hat.

Um dies zu vermeiden und zwei separate interne Caches zu verwalten (eine für die Teilseite und eine für die gesamte Seite), sollten Sie beim Aufrufen von AJAX einen Parameter erhalten. Wie das in Ihrem Code:

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

Hoffe das hilft.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top