it-swarm.com.de

Leeren Sie den Cache in JavaScript

Wie lösche ich einen Browser-Cache mit JavaScript?

Wir haben den neuesten JavaScript-Code bereitgestellt, können jedoch nicht den neuesten JavaScript-Code abrufen.

Anmerkung der Redaktion: Diese Frage ist an den folgenden Stellen teilweise dupliziert, und die Antwort in der ersten der folgenden Fragen ist wahrscheinlich die beste. Diese akzeptierte Antwort ist nicht mehr die ideale Lösung.

Wie kann ich den Browser zwingen, zwischengespeicherte CSS/JS-Dateien neu zu laden?

Wie kann ich Clients zwingen, JavaScript-Dateien zu aktualisieren?

Lokale Javascript-Quell-/JSON-Daten dynamisch neu laden

165
subramani

Sie können window.location.reload (true) aufrufen, um die aktuelle Seite neu zu laden. Es werden alle zwischengespeicherten Elemente ignoriert und neue Kopien der Seite, CSS, Bilder, JavaScript usw. vom Server abgerufen. Dadurch wird nicht der gesamte Cache geleert, sondern der Cache für die Seite, auf der Sie sich befinden, wird geleert.

Die beste Strategie besteht jedoch darin, den Pfad oder den Dateinamen zu versionieren, wie in verschiedenen anderen Antworten angegeben. Siehe auch Revving Filenames: Verwenden Sie kein Querystring aus Gründen, die ?v=n Nicht als Versionsschema verwenden.

188
Kevin Hakanson

Sie können den Cache nicht mit Javascript leeren. Eine übliche Methode besteht darin, die Versionsnummer oder den zuletzt aktualisierten Zeitstempel wie folgt an die Datei anzuhängen:

myscript.123.js

oder

myscript.js?updated=1234567890

106
Greg

Versuchen Sie, den Quellcode der JavaScript-Datei zu ändern? Davon:

<script language="JavaScript" src="js/myscript.js"></script>

Dazu:

<script language="JavaScript" src="js/myscript.js?n=1"></script>

Diese Methode sollte Ihren Browser zwingen, eine neue Kopie der JS-Datei zu laden.

37
Barry Gallagher

Abgesehen vom stündlichen oder wöchentlichen Zwischenspeichern können Sie den Dateidaten entsprechend zwischenspeichern.

Beispiel (in PHP):

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

oder verwenden Sie die Zeit zum Ändern von Dateien:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>
19
Alexandre T.

Sie können auch das stündliche Neuladen des Codes erzwingen, wie in PHP:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

oder

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>
10
Fabien Ménager

fügen Sie dies am Ende Ihrer Vorlage ein:

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}
6
yboussard

versuche es damit

 <script language="JavaScript" src="js/myscript.js"></script>

Dazu:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>
5
Daniel

Hier ist ein Ausschnitt dessen, was ich für mein letztes Projekt verwende.

Vom Controller:

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

Aus der Sicht:

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

Unser Veröffentlichungsprozess generiert eine Datei mit der Versionsnummer des aktuellen Builds. Dies funktioniert durch URL-Codierung dieser Datei und deren Verwendung als Cache-Buster. Wenn diese Datei nicht vorhanden ist, werden als Failover die Jahres- und Wochennummer verwendet, sodass das Zwischenspeichern weiterhin funktioniert und mindestens einmal pro Woche aktualisiert wird.

Dies bietet auch Cache-Busting für jedes Laden von Seiten in der Entwicklungsumgebung, sodass Entwickler sich nicht um das Leeren des Caches für Ressourcen (Javascript, CSS, Ajax-Aufrufe usw.) kümmern müssen.

5
Justin Johnson

oder Sie können einfach die js-Datei vom Server mit file_get_contets lesen und dann den js-Inhalt in die Kopfzeile einfügen

5
albanx

Wenn Sie PHP benutzen, können Sie:

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>
4
user3573488

Ich hatte einige Probleme mit dem von yboussard vorgeschlagenen Code. Die innere Schleife funktionierte nicht. Hier ist der geänderte Code, den ich mit Erfolg verwende.

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}
3
Bryan

Vielleicht ist "Cache leeren" nicht so einfach, wie es sein sollte. Anstatt den Cache in meinen Browsern zu leeren, stellte ich fest, dass das "Berühren" der Datei das Datum der auf dem Server zwischengespeicherten Quelldatei ändert (Getestet am) Edge, Chrome und Firefox) und die meisten Browser laden automatisch die aktuellste Kopie von dem herunter, was sich auf Ihrem Server befindet (Code, Grafiken und Multimedia). Ich schlage vor, Sie kopieren nur die aktuellsten Skripte Der Server und die "do the touch thing" Lösung, bevor Ihr Programm ausgeführt wird, ändern das Datum aller Ihrer Problemdateien auf das aktuellste Datum und Dann lädt es eine neue Kopie in Ihren Browser herunter:

<?php
    touch('/www/control/file1.js');
    touch('/www/control/file2.js');
    touch('/www/control/file2.js');
?>

... der Rest Ihres Programms ...

Ich habe einige Zeit gebraucht, um dieses Problem zu beheben (da viele Browser unterschiedlich auf unterschiedliche Befehle reagieren, aber alle die Uhrzeit von Dateien überprüfen und mit Ihrer heruntergeladenen Kopie in Ihrem Browser vergleichen, wenn Datum und Uhrzeit unterschiedlich sind, wird die Aktualisierung durchgeführt) kann nicht den vermeintlich richtigen Weg gehen, es gibt immer eine andere brauchbare und bessere Lösung dafür. Beste Grüße und viel Spaß beim Zelten.

3
Luis H Cabrejo

Ich tendiere dazu, mein Framework zu versionieren, und wende dann die Versionsnummer auf Skript- und Stilpfade an

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>
1
SpliFF

Bitte machen Sie keine falschen Angaben. Cache api ist ein anderer Cache-Typ als http cache

HTTP-Cache wird ausgelöst, wenn der Server die richtigen Header sendet, auf die Sie mit javasvipt nicht zugreifen können.

Cache api wird andererseits abgefeuert, wenn Sie möchten, es ist nützlich, wenn Sie mit Service Worker arbeiten, damit Sie die Anforderung von dieser Art von Cache aus kreuzen und beantworten können, siehe: - Illustration 1Illustration 2Kurs

Mit diesen Techniken können Sie Ihre Benutzer immer auf den neuesten Stand bringen:

  1. Verwenden Sie location.reload (true) das funktioniert nicht für mich, also würde ich es nicht empfehlen.
  2. Verwenden Sie Cache-API , um im Cache zu speichern und die Anforderung mit Service-Worker zu kreuzen. Seien Sie mit diesem vorsichtig, da der Server die Cache-Header) gesendet hat Für die Dateien, die Sie aktualisieren möchten, antwortet der Browser zuerst aus dem HTTP-Cache. Wird er nicht gefunden, wird er an das Netzwerk weitergeleitet, sodass Sie möglicherweise eine alte Datei erhalten
  3. Ändern Sie die URL von Ihnen Stactics-Dateien, meine Empfehlung ist, Sie sollten es mit der Änderung Ihres Dateiinhalts benennen, ich verwende md5 und konvertiere es dann zu Zeichenfolge und url freundlich, und der md5 wird sich mit dem ändern Inhalt der Datei, dort können Sie HTTP-Cache-Header frei lange genug senden

Ich würde das dritte empfehlen siehe

1
window.parent.caches.delete("call")

schließen und öffnen Sie den Browser, nachdem Sie den Code in der Konsole ausgeführt haben.

1
Apoorv

Cache.delete () kann für neues Chrome, Firefox und Opera verwendet werden.

1
Jay Shah

Sie können auch das Browser-Caching mit Meta-HTML-Tags deaktivieren. Fügen Sie einfach HTML-Tags in den Kopfbereich ein, um zu verhindern, dass die Webseite während des Codierens/Testens zwischengespeichert wird. Wenn Sie fertig sind, können Sie die Meta-Tags entfernen.

(im Kopfbereich)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/>

Aktualisieren Sie Ihre Seite nach dem Einfügen in den Kopf und sollten Sie den neuen Javascript-Code auch aktualisieren.

Über diesen Link erhalten Sie weitere Optionen, wenn Sie diese benötigen http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

oder Sie können einfach eine Schaltfläche wie folgt erstellen

<button type="button" onclick="location.reload(true)">Refresh</button>

es wird aktualisiert und vermeidet das Zwischenspeichern. Es wird jedoch auf Ihrer Seite angezeigt, bis Sie den Test abgeschlossen haben. Anschließend können Sie es entfernen. Faustoption ist am besten ich Sache.

0
alfmonc