JavaScript - bfcache/pageshow-event - Veranstaltung.beharrte immer auf false gesetzt?

In einem standard-Java /SpringMVC /JSP /jQuery, web-app, die ich versuche zu erkennen, eine "Zurück" (oder Geschichte.go(-1)) - Ereignis, um die Aktualisierung (AJAX) Zusammenfassung Komponente/panel-Inhalte, wenn ich wieder auf eine Seite (wo wir uns ändern können die backend-Daten, angezeigt durch das summary-Komponente).

Habe ich versucht, das folgende in JavaScript (folgenden einige Beiträge auf StackExchange re, wie Sie diese erreichen):

<script type="text/javascript">
$(document).ready(function() {
    window.onpageshow = function(event) {
        console.log("Event:");
        console.dir(event);
        if (event.persisted) {
            alert("non-jQuery - back to page - loaded from bfcache");
        } else {
            alert("non-jQuery - loaded page from server");
        }
    };
    $(window).on("pageshow", function(event){
        console.log("Event:");
        console.dir(event);
        if (event.originalEvent.persisted) {
            alert("jquery - back to page - loaded from bfcache");
        } else {
            alert("jquery - loaded page from server");
        }
    });
});
</script>

Ich bin mit OpenSUSE Linux und haben versucht, dies mit FireFox und Chrome (aktuelle Versionen), aber zu jeder Zeit der Veranstaltung persisted Attribut false (ich kann das sehen in der JavaScript-Konsole und durch die Warnungen, die pop-up aus dem obigen code). Durch jedes mal, ich meine, unabhängig davon, ob es geladen wurde vom server angezeigt oder wieder über den Back-button (oder ein 'Zurück' - link).

Meine intention war es, ein AJAX-Aufruf Neuladen der Zusammenfassung Komponente/panel mit den zu aktualisierenden Daten vom server, wenn die Seite wurde, welche über den Back-button oder history.go(-1) nennen.

Ich habe auch versucht die Einstellung eine unload-handler (das macht nichts) zu verhindern, dass die Seite nicht in die bfcache aber es scheint immer noch zu zeigen, dass ein bf-Cache-version und die event.persisted (oder event.originalEvent.persisted)false.

Ist diese Eigenschaft verwaltet das richtig unter Linux? Mache ich etwas dumm in meinem code? Jede Hilfe oder Ideen würde sehr geschätzt, danke!

Ich glaube nicht, das hat nichts mit Linux zu tun. Ich bin mit in es auf einem Mac mit OS 10.9 Mavericks mit sowohl Safari 7 und Firefox 26. Ich habe versucht, jede Technik, die ich finden kann, einschließlich den server senden von cache-control-Header (Cache-Control: no-cache, must-revalidate, max-age=0). Der Browser eigentlich nie die Seite neu laden (über Wireshark überprüft), und event.beibehalten ist immer falsch.

InformationsquelleAutor Eoin | 2013-07-02

  1. 9

    Dies scheint ein bug in Chrome (auch vorhanden in IE11).

    Habe ich folgenden workaround:

    <input type="hidden" id="cacheTest"></input>
<script>
  var input = document.querySelector('#cacheTest')

  if (input.value === "") {
    //the page has been loaded from the server,
    //equivalent of persisted == false
  }
  else {
    //the page has been loaded from the cache,
    //equivalent of persisted == true
  }

  //change the input value so that we can detect
  //if the page is reloaded from cache later
  input.value = "some value"
</script>

    Dieser nutzt die Tatsache, dass in den meisten Browsern, wenn die Seite vom cache geladen wird, bilden Felder, die Werte sind auch konserviert.

    Obwohl diese Werke für Chrome 39.0.2171.95 (64-bit), es scheint nicht das gleiche zu tun in iOS Chrome oder Safari 8. Irgendwelche Ratschläge? Dank
    ja, ich habe tatsächlich behoben diejenigen, die mit der Geschichte.popstate Lösung, vielen Dank

    InformationsquelleAutor Grégoire Clermont

  2. 7

    Habe ich gefunden hidden-input-buttons sind keine zuverlässige Lösung, da Sie möglicherweise der falsche Wert, wenn der Benutzer zurück navigiert Sie zu der Seite und trifft dann auf aktualisieren. Einige Browser (Firefox) behalten Eingabewerte auf aktualisieren, so dass jedes mal, wenn der Nutzer es aktualisieren aktualisieren wieder da die Eingabe-Taste hält den falschen Wert. Dies ist ein typisches Szenario für Foren (Benutzer ein Thema, trifft auf die zurück-Taste, um zurück zu der Liste der Themen, und kann weiterhin auf aktualisieren, um zu überprüfen, ob es neue Themen).

    Wie bereits von Grégoire Clermont, event.persisted ist buggy in chrome (und IE) und dieses ist immer noch nicht behoben wurde, für entweder browser ab Feb 2017. Die gute Nachricht ist, können Sie sich auf window.performance.navigation.type == 2 für chrome und IE. Ironischerweise Firefox ist unzuverlässig für letzteres, aber es sollte keine Rolle, da ist es zuverlässig für event.persisted. Der folgende code funktionierte für mich:

    if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && 
            window.performance.navigation.type == 2) 
        {
            location.reload();
        }
    },
   false);
}

    InformationsquelleAutor Tom Davenport

  3. 0

    Ich weiß, das ist ein bisschen spät, aber das funktioniert für mich:

    window.onpageshow = function(e) {

    if (e.persisted) {

        alert("Page shown");
        window.location.reload();
    }
};

    Ich glaube nicht, müssen Sie es in das Dokument ready-Funktion, verwenden Sie einfach Vanille als oben.

    Warum ist das downvoted? Dies ist der richtige Ansatz, getestet auf safari.
    Ich glaube nicht, dass das funktioniert auf Chrome fyi.

    InformationsquelleAutor Chez

Schreibe einen Kommentar