Durch Klicken auf die Zurück-Schaltfläche des Browsers wird die Verlaufsseite aktualisiert. Lösung für dieses Problem

Zuallererst wissen wir, wie dieses Problem auftritt. Wenn wir die folgende Seitenlisten-Informationsseite haben, klicken Sie, um die Detailseite aufzurufen, ändern Sie die Daten auf der Detailseite, geben Sie sie über den Verlauf zurück und kehren Sie dann zur Liste zurück Informationsseite, da es sich bei den Listeninformationen um eine Verlaufsrückgabe handelt. Ja, die ursprünglichen Daten vor der Änderung werden weiterhin standardmäßig angezeigt und die geänderten Daten müssen aktualisiert werden. Gibt es also eine Möglichkeit, auf die Schaltfläche „Zurück“ auf dem Telefon, um die Daten auf der vorherigen Verlaufsseite zu aktualisieren?

Onpageshow-Event und Onload-Event. Das Onpageshow-Ereignis ähnelt dem Onload-Ereignis, wenn die Seite zum ersten Mal geladen wird. Das Onpageshow-Ereignis wird also nicht ausgelöst, wenn die Seite geladen wird aus dem Browser-Cache lesen.

Um zu sehen, ob die Seite direkt vom Server geladen oder aus dem Cache gelesen wurde, können Sie das persistente

-Attribut des PageTransitionEvent -Objekts verwenden. Wenn die Seite dieses Attribut aus dem Cache des Browsers liest, gibt sie „true“ zurück, andernfalls gibt sie „false“ zurück

Lösung

Durch Onload-Methode

Der Code lautet wie folgt:

Schreiben Sie eine versteckte Eingabe in die Seite

<input type="hidden" id="refreshed" value="no">

Die js-Operation ist wie folgt

    onload=function(){
        var refreshedId=document.getElementById("refreshed");
        if(refreshedId.value=="no"){
            refreshedId.value="yes";
           } else{
             refreshedId.value="no";
             location.reload();
         }
    }

Verwenden Sie die Onpageshow-Methode

Diese Methode ist kein Problem Der Computer, aber Apple Um das Onload-Ereignis zurückzugeben, ohne es in Safari auszuführen, verwenden Sie die folgende Methode:

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

Durch den tatsächlichen Vorgang haben wir festgestellt, dass event.persisted auf dem Computer immer false zurückgibt, aber das ist der Fall Kein Problem auf der Handy-Safari.

Umfassende Lösung

Daher können Sie den Code wie folgt schreiben:

  if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload() 
            }
        };
    }else{
        onload=function(){
            var refreshedId=document.getElementById("refreshed");
            if(refreshedId.value=="no"){
                refreshedId.value="yes";
               } else{
                 refreshedId.value="no";
                 location.reload();
             }
        }
    }

Durch den obigen Code habe ich festgestellt, dass die Seite zum ersten Mal geöffnet wird In Safari tritt manchmal der Begrüßungsbildschirmeffekt auf.

Fügen Sie den folgenden Code hinzu:

$(window).bind("unload", function() { });

Der Begrüßungsbildschirmeffekt wird nicht mehr angezeigt.

Caching durch Iframe verhindern

Fügen Sie der Seite den folgenden Code hinzu

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>

Diese Methode muss überprüft werden.

Aktualisierungsmethode durch

Zeitstempel erzwingen

Der folgende Code gilt für das Problem mit der Safari-Zurück-Taste auf dem iPad

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0
function showLoadingBox(text) {
    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
    showLoadingBoxCount = 0
    showLoadingBoxLoadedTimestamp = new Date().getTime();
    //Here load the spinner
}
function showLoadingBoxIpadRelaod()
{
    //计算时间超过500毫秒
    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;
    showLoadingBoxCount = showLoadingBoxCount + 1;
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if(diffTime > showLoadingBoxCount && isiPad){
        location.reload();
    }
}

Ich glaube, Sie haben es gelesen Diese Fälle Nachdem Sie die Methode beherrscht haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Verwandte Lektüre:

So konvertieren Sie die CSS-Codierung

css3 klicken, um Welleneffekte anzuzeigen

So verwenden Sie die Leinwand, um einen Partikelfontänen-Animationseffekt zu erstellen

Das obige ist der detaillierte Inhalt vonDurch Klicken auf die Zurück-Schaltfläche des Browsers wird die Verlaufsseite aktualisiert. Lösung für dieses Problem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!