Browser zwingen, CSS, Javascript usw. Zu aktualisieren

86

Ich entwickle eine Website, die auf Wordpress-Quellcode über XAMPP basiert. Manchmal ändere ich den CSS-Code, Skripte oder etwas anderes und stelle fest, dass mein Browser Zeit braucht, um die Änderungen zu übernehmen. Dies führt dazu, dass ich mehrere Browser verwende, um einen zu aktualisieren. Wenn die neuen Stile nicht angewendet werden, versuche ich den zweiten und es ist immer so.

Gibt es eine Möglichkeit, dieses Problem zu vermeiden? Manchmal ändere ich den Code, ohne die vorherigen Änderungen zu bemerken.

user1511579
quelle
2
Browser-Cache. Jedes Mal, wenn Sie Änderungen an CSS oder JavaScript vornehmen und die von Ihnen aktualisierte Seite anzeigen, wird dieses Problem angezeigt. Sie können eine Aktualisierung erzwingen, indem Sie im Browser STRG + F5 drücken. Dadurch wird die neueste Version angezeigt. Ich habe festgestellt, dass Chrome diese Sequenz manchmal ein paar Mal benötigt ...
anAgent
Sie können den Browser-Cache auch programmgesteuert löschen
Pawan
Antwort hier: Antwort von Fermin .
JWC

Antworten:

107

Allgemeine Lösung

Drücken Sie Ctrl+ F5(oder Ctrl+ Shift+ R), um ein erneutes Laden des Caches zu erzwingen. Ich glaube , dass Macs verwenden Cmd+ Shift+ R.

PHP

In PHP können Sie den Cache deaktivieren, indem Sie das Ablaufdatum mit Headern auf eine frühere Zeit setzen:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrom

Der Cache von Chrome kann deaktiviert werden, indem Sie die Entwicklertools mit öffnen F12, auf das Zahnradsymbol in der unteren rechten Ecke klicken und im Einstellungsdialog die Option Cache deaktivieren wie folgt auswählen:

Geben Sie hier die Bildbeschreibung ein
Bild aus dieser Antwort genommen .

Feuerfuchs

Geben Sie about:configin die URL-Leiste ein und suchen Sie den Eintrag mit dem Titel network.http.use-cache. Stellen Sie dies auf ein false.

Bojangles
quelle
Vielen Dank an JamWaffles für die detaillierte Beschreibung und an alle für die Antworten. Vielen Dank.
user1511579
In neueren Versionen von Chrome: STRG + R.
Alix Axel
1
Für Chrome hat sich die von Ihnen freigegebene Benutzeroberfläche ein wenig geändert. Drücken Sie einfach auf die Registerkarte Netzwerk und Sie finden dort das Kontrollkästchen.
Baz Guvenkaya
5
Zu Ihrer Information: Für Opera auf dem Mac ist es cmd-alt-R
Derwent
52

Wenn Sie dies auf der Clientseite vermeiden möchten, können Sie ?v=1.xdem CSS-Dateilink etwas hinzufügen , wenn der Dateiinhalt geändert wird. Wenn dies beispielsweise der Fall ist <link rel="stylesheet" type="text/css" href="css-file-name.css">, können Sie dies ändern, um <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">das Caching zu umgehen.

F0G
quelle
1
Guter Punkt, aber dann Browser immer nach Datei fragen. Natürlich gibt der Server "304 Not Modified" zurück.
Andrzej Jozwik
@ajozwik Ich habe mit Firefox 26.0 und Chromium 31.0.1650.57 getestet. Wie Sie bereits sagten, führt Firefox tatsächlich jedes Mal eine neue Abfrage durch, wenn die CSS-URL ein Fragezeichen enthält (und der Server die Antwort 304 mit leerem Text gibt). Firefox führt keine neue Abfrage durch, wenn die CSS-URL kein Fragezeichen enthält. Chromium stellt auch mit Fragezeichen keine neue Abfrage. Wahrscheinlich kann dies als ein Fehler von Firefox angesehen werden.
Jaan
funktioniert meine Freunde nicht so. Nur wenn der Dateiname anders ist. Warum so viele positive Stimmen?
Gediminas
Ich fand an vielen anderen Orten den gleichen Ansatz wie in dieser Antwort. Ich glaube, dass dies in der Vergangenheit funktioniert hat, aber nicht mehr funktioniert. Wenn Sie sich im Entwicklungsmodus befinden, besteht der beste und universellste Ansatz darin, das Caching im Browser über HTML-Meta-Tags zu deaktivieren. Siehe meine Antwort unten.
ePi272314
9

Wenn Sie PHP schreiben können, können Sie schreiben:

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

Es wird immer aktualisiert!

EDIT: Natürlich ist es nicht wirklich praktisch für eine ganze Website, da Sie dies nicht für alles manuell hinzufügen würden.

Mageek
quelle
Auf diese Weise funktioniert es nicht! Nur wenn der Dateiname unterschiedlich ist, wird der Browser neu geladen. Oder vielleicht mit diesem Hinweis nur für einige Browser funktionieren, wenn es für Sie funktioniert hat
Gediminas
5

Entwicklersicht
Wenn Sie sich im Entwicklungsmodus befinden (wie in der ursprünglichen Frage), besteht der beste Ansatz darin, das Caching im Browser über HTML-Meta-Tags zu deaktivieren. Um diesen Ansatz universell zu gestalten, müssen Sie mindestens drei Meta-Tags einfügen, wie unten gezeigt.

<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" />

Auf diese Weise müssen Sie als Entwickler nur die Seite aktualisieren, um die Änderungen zu sehen. Vergessen Sie jedoch nicht, diesen Code in der Produktion zu kommentieren, schließlich ist Caching eine gute Sache für Ihre Kunden.

Produktionsmodus
Da Sie in der Produktion das Caching zulassen und Ihre Kunden nicht wissen müssen, wie ein vollständiges Neuladen oder ein anderer Trick erzwungen werden muss, müssen Sie sicherstellen, dass der Browser die neue Datei lädt. Und ja, in diesem Fall ist der beste Ansatz, den ich kenne, den Namen der Datei zu ändern.

ePi272314
quelle
2
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Es wird aktualisiert, wenn Änderungen vorgenommen werden.

AllenBooTung
quelle
Sehr schöne Lösung für all jene Projekte, die kein Webpack oder ein Pack-Tool verwenden, das den Ressourcen automatisch eine Versionierung hinzufügt.
Richi González
Ich habe es nicht abgelehnt, aber diese Lösung funktioniert in neuestem Chrome bis heute nicht gut. Sie ruft immer noch die vorherige Version der JavaScript-Datei ab
Mikaël Mayer
1

Stellen Sie sicher, dass dies nicht über Ihr DNS geschieht. In Cloudflare können Sie beispielsweise den Entwicklungsmodus aktivieren, in dem Ihre Stylesheets und Bilder gelöscht werden, da Cloudflare einen beschleunigten Cache bietet. Dadurch wird es deaktiviert und bei jedem Besuch Ihrer Website aktualisiert.

Sean
quelle
0

Löschen Sie den Cache Ihres Browsers.

DominicEU
quelle
0

Sie können das Caching mit der Webentwickler-Symbolleiste von Firefox deaktivieren.

Florent
quelle
0

Die oben akzeptierte Antwort ist korrekt. Wenn Sie den Cache jedoch nur regelmäßig neu laden möchten und Firefox verwenden, bieten die Web Developer-Tools (unter dem Menüpunkt Tools ab November 2015) eine Netzwerkoption. Dies beinhaltet eine Schaltfläche zum erneuten Laden. Wählen Sie das Neuladen für einen einmaligen Cache-Reset.

Steve Cooke
quelle
0

Wenn Sie sicherstellen möchten, dass diese Dateien von Chrome für alle Benutzer ordnungsgemäß aktualisiert werden, müssen Sie sie must-revalidatein der Cache-ControlKopfzeile haben. Dadurch überprüft Chrome die Dateien erneut, um festzustellen, ob sie erneut abgerufen werden müssen.

Empfehlen Sie den folgenden Antwortheader:

Cache-Control: must-validate

Dadurch wird Chrome angewiesen, beim Server zu prüfen, ob eine neuere Datei vorhanden ist. Wenn es eine neuere Datei gibt, erhält sie diese in der Antwort. Wenn nicht, erhält es eine Antwort 304 und die Zusicherung, dass die Antwort im Cache auf dem neuesten Stand ist.

Wenn Sie diesen Header NICHT festlegen, wird Chrome ohne eine andere Einstellung, die die Datei ungültig macht, niemals beim Server nachfragen, ob es eine neuere Version gibt.

Hier ist ein Blog-Beitrag , in dem das Problem weiter behandelt wird.

AgilePro
quelle
0

Verwenden Sie anstelle des Link-Tags in HTML-Kopf zur externen CSS-Datei PHP-Include:

<style>
<?php
include("style.css");
?>      
</style>

Art von Hack, funktioniert aber bei mir :)

Jens Rundberg
quelle
1
Haben Sie gedacht, dass das OP möglicherweise kein PHP verwendet?
Oram
0

Ich habe beschlossen, dass ich meine CSS- und JS-Verzeichnisse bei jeder Änderung umbenenne, da Browser nicht nach neuen Versionen von CSS- und JS-Dateien suchen. Ich benutze css1 bis css9 und js1 bis js9 als Verzeichnisnamen. Wenn ich 9 bin, fange ich als nächstes bei 1 an. Es ist ein Schmerz, aber es funktioniert jedes Mal perfekt. Es ist lächerlich, den Benutzern sagen zu müssen, dass sie tippen sollen.

Roger Jones
quelle
0

Ich habe einen Fall, in dem ich in der Lage sein muss, meine Stylesheets aus der Ferne zu erstellen und zu ändern, was Tausende von Clients betrifft. Aufgrund des Risikos einer hohen Netzwerklast schalte ich den Cache jedoch nicht aus.

Da ich den HTML-Inhalt remote ändern kann, verknüpfe ich das Stylesheet mit einem Hashcode, der dem Inhalt des Stylesheets entspricht.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

Allerdings verwende ich auch eine clientseitige Javascript-Funktion, um Knoten und Attribute sorgfältig zu ersetzen, wenn sich der HTML-Inhalt ändert. Dies bedeutet, dass das Stylesheet-Link-Tag nicht ersetzt wird, sondern nur das href-Attribut.

Dieses Szenario funktioniert gut in Chrome, Firefox und Edge unter Windows, auch in Chrome unter Android, funktioniert aber zu meiner Überraschung nicht immer in Webclients unter Android. Ich bin also mehr oder weniger auf der Suche nach etwas, um das Update mithilfe von Javascript zu erzwingen / auszulösen - optimal, ohne dass die Seite neu geladen werden muss.

Thomas Williams
quelle
-1

Versuche dies:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

Wenn Sie etwas nach dem '?' Das ist jedes Mal anders, wenn auf die Seite zugegriffen time()wird. Es ist keine gute Idee, dies dauerhaft in Ihrem Code zu belassen, da dies das Laden von Seiten nur verlangsamt und wahrscheinlich nicht erforderlich ist.

Ich habe festgestellt, dass das Erzwingen einer Stylesheet-Aktualisierung hilfreich ist, wenn Sie umfangreiche Änderungen am Layout einer Seite vorgenommen haben und der Zugriff auf das neue Stylesheet von entscheidender Bedeutung ist, damit etwas Sinnvolles auf dem Bildschirm angezeigt wird.

BPrice
quelle
1
Auf diese Weise funktioniert es nicht! Nur wenn der Dateiname unterschiedlich ist, wird der Browser neu geladen. Oder vielleicht mit diesem Hinweis nur für einige Browser funktionieren, wenn es für Sie funktioniert hat. Downvote
Gediminas