web-dev-qa-db-de.com

Verhindern Sie das Laden der Safari aus dem Cache, wenn Sie auf die Schaltfläche "Zurück" klicken

Beim Laden alter YouTube-Videos beim Klicken auf die Schaltfläche "Zurück" ist ein Problem mit der Safari aufgetreten. Ich habe versucht, onunload = "" (hier erwähnt Verhindern des Caches auf der Zurück-Schaltfläche in Safari 5 ) zum Body-Tag hinzuzufügen, aber in diesem Fall funktioniert es nicht.

Gibt es eine Möglichkeit, das Laden von Safari aus dem Cache auf einer bestimmten Seite zu verhindern?

59
Mark Steggles

Ihr Problem wird durch Back-Forward-Cache verursacht. Es soll den vollständigen Status der Seite speichern, wenn der Benutzer weg navigiert. Wenn der Benutzer mit der Schaltfläche "Zurück" zurück navigiert, kann die Seite sehr schnell aus dem Cache geladen werden. Dies unterscheidet sich vom normalen Cache, in dem nur HTML-Code zwischengespeichert wird.

Wenn die Seite für bfcache onload geladen wird, wird kein Ereignis ausgelöst. Stattdessen können Sie die Eigenschaft persisted des Ereignisses onpageshow überprüfen. Beim ersten Laden der Seite wird der Wert auf false gesetzt. Wenn eine Seite aus dem bfcache geladen wird, wird sie auf true gesetzt.

Kludgish-Lösung besteht darin, ein Neuladen zu erzwingen, wenn eine Seite aus dem bfcache geladen wird.

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

Wenn Sie jQuery verwenden, gehen Sie wie folgt vor:

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        window.location.reload() 
    }
});
168
Mika Tuupola

Ja, der Safari-Browser verarbeitet den Back/Foreward-Button-Cache nicht wie Firefox und Chrome). Insbesondere Iframes wie Vimeo oder YouTube-Videos werden kaum zwischengespeichert, obwohl es eine neue Datei iframe.src gibt.

Ich habe drei Möglichkeiten gefunden, damit umzugehen. Wählen Sie das Beste für Ihren Fall. Auf Firefox 53 und Safari 10.1 getestete Lösungen

1. Ermitteln Sie, ob der Benutzer die Taste Zurück/Vorwärts verwendet, und laden Sie dann die gesamte Seite neu oder laden Sie nur die zwischengespeicherten iFrames neu, indem Sie den Befehl src ersetzen.

if (!!window.performance && window.performance.navigation.type === 2) {
            // value 2 means "The page was accessed by navigating into the history"
            console.log('Reloading');
            //window.location.reload(); // reload whole page
            $('iframe').attr('src', function (i, val) { return val; }); // reload only iframes
        }

2. Ganze Seite neu laden, wenn die Seite zwischengespeichert ist

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

. Entfernen Sie die Seite aus dem Verlauf, damit Benutzer die Seite nicht erneut mit den Schaltflächen "Zurück"/"Vor" aufrufen können.

$(function () {
            //replace() does not keep the originating page in the session history,
            document.location.replace("/Exercises#nocache"); // clear the last entry in the history and redirect to new url
        });
6
Javan R.

Alle diese Antworten sind ein Stück vom Hacker. In modernen Browsern (Safari) funktioniert nur die onpageshow -Lösung.

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

auf langsamen Geräten wird manchmal eine zwischengespeicherte Ansicht in Sekundenbruchteilen angezeigt, bevor sie erneut geladen wird. Die richtige Möglichkeit, dieses Problem zu beheben, besteht darin, die Cache-Steuerung auf der Server-Antwort auf einen der folgenden Werte richtig einzustellen

'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'

5
waj-er-rr

Sie können einen Anker verwenden und den Wert des Speicherorts href des Dokuments beobachten.

Beginnen mit http://acme.co/, füge etwas an den Ort an, wie '#b';

Nun lautet Ihre URL also http://acme.co/#b, wenn eine Person die Zurück-Taste drückt, geht es zurück zu http://acme.co, und die Intervallprüffunktion erkennt das Fehlen des von uns festgelegten Hash-Tags, löscht das Intervall und lädt die verweisende URL mit einem daran angehängten Zeitstempel.

Es gibt einige Nebenwirkungen, aber ich überlasse es Ihnen, diese herauszufinden;)

<script>
document.location.hash = "#b";
var referrer = document.referrer;

// setup an interval to watch for the removal of the hash tag
var hashcheck = setInterval(function(){
    if(document.location.hash!="#b") {

    // clear the interval
    clearInterval(hashCheck);

    var ticks = new Date().getTime();
    // load the referring page with a timestamp at the end to avoid caching
    document.location.href.replace(referrer+'?'+ticks);
    }
},100);
</script>

Dies ist nicht getestet, sollte aber mit minimalem Optimierungsaufwand funktionieren.

1
L422Y

Zuerst füge ein Feld in deinen Code ein:

<input id="reloadValue" type="hidden" name="reloadValue" value="" />

dann starte jQuery:

jQuery(document).ready(function()
{
        var d = new Date();
        d = d.getTime();
        if (jQuery('#reloadValue').val().length == 0)
        {
                jQuery('#reloadValue').val(d);
                jQuery('body').show();
        }
        else
        {
                jQuery('#reloadValue').val('');
                location.reload();
        }
});

Das Verhalten hängt mit dem Zurück/Vorwärts-Cache von Safari zusammen. Informationen hierzu finden Sie in der entsprechenden Apple Dokumentation: http://web.archive.org/web/20070612072521/http://developer.Apple.com/internet/safari/faq.html) # anchor5

Apples eigener Lösungsvorschlag besteht darin, einen leeren iframe auf Ihrer Seite hinzuzufügen:

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

(Die zuvor akzeptierte Antwort scheint ebenfalls gültig zu sein, wollte nur die Dokumentation und eine weitere mögliche Fehlerbehebung einbinden.)

0
Simon Boudrias