Wie kann ich den Browser dazu bringen, CSS- und Javascript-Änderungen anzuzeigen?

Translate

CSS- und Javascript-Dateien ändern sich nicht sehr oft, daher möchte ich, dass sie vom Webbrowser zwischengespeichert werden. Ich möchte aber auch, dass der Webbrowser Änderungen an diesen Dateien sieht, ohne dass der Benutzer seinen Browser-Cache leeren muss. Sie möchten auch eine Lösung, die mit einem Versionskontrollsystem wie Subversion gut funktioniert.


Einige Lösungen, die ich gesehen habe, beinhalten das Hinzufügen einer Versionsnummer am Ende der Datei in Form einer Abfragezeichenfolge.

Könnte die SVN-Versionsnummer verwenden, um dies für Sie zu automatisieren:ASP.NET SVN-Versionsnummer anzeigen

Können Sie angeben, wie Sie die einschließenRevisionVariable einer anderen Datei? Das heißt, in der HTML-Datei kann ich die Revisionsnummer in die URL zur CSS- oder Javascript-Datei aufnehmen.

In demSubversion BuchÜber Revision heißt es: "Dieses Schlüsselwort beschreibt die letzte bekannte Revision, in der diese Datei im Repository geändert wurde."

Firefox ermöglicht auch das DrückenSTRG+Rum alles auf einer bestimmten Seite neu zu laden.

Zur Verdeutlichung suche ich nach Lösungen, bei denen der Benutzer nichts unternehmen muss.

This question and all comments follow the "Attribution Required."

Alle Antworten

Translate

Ich habe festgestellt, dass der Browser die Dateien anfordert, wenn Sie den zuletzt geänderten Zeitstempel der Datei an das Ende der URL anhängen, wenn diese geändert wird. Zum Beispiel in PHP:

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}
Quelle
Translate

Einige Lösungen, die ich gesehen habe, beinhalten das Hinzufügen einer Versionsnummer am Ende der Datei in Form einer Abfragezeichenfolge.

<script type="text/javascript" src="funkycode.js?v1">

Sie können die SVN-Versionsnummer verwenden, um dies zu automatisierenfür dichdurch das WortLastChangedRevisionin Ihrer HTML-Datei nach wo v1 oben erscheint. Sie müssen dazu auch Ihr Repository einrichten.

Ich hoffe das klärt meine Antwort weiter?

Firefox ermöglicht auch das DrückenSTRG+Rum alles auf einer bestimmten Seite neu zu laden.

Quelle
Translate

Meiner Meinung nach ist es besser, die Versionsnummer in die Datei selbst aufzunehmen, zmyscript.1.2.3.js. Sie können Ihren Webserver so einstellen, dass diese Datei für immer zwischengespeichert wird, und einfach eine neue JS-Datei hinzufügen, wenn Sie eine neue Version haben.

Quelle
Translate

Wenn Sie eine neue Version Ihrer CSS- oder JS-Bibliotheken veröffentlichen, kann Folgendes auftreten:

  1. Ändern Sie den Dateinamen so, dass er eine eindeutige Versionszeichenfolge enthält
  2. Ändern Sie die HTML-Dateien, die auf die Bibliothek verweisen, so, dass sie auf die versionierte Datei verweisen

(Dies ist normalerweise eine ziemlich einfache Angelegenheit für ein Release-Skript.)

Jetzt können Sie das Ablaufdatum für CSS / JS auf Jahre in der Zukunft festlegen. Wenn Sie den Inhalt ändern und der referenzierende HTML-Code auf einen neuen URI verweist, verwenden Browser die alte zwischengespeicherte Kopie nicht mehr.

Dies bewirkt das gewünschte Caching-Verhalten, ohne dass der Benutzer etwas benötigt.

Quelle
Translate

Ich fragte mich auch, wie ich das machen sollte, als ich Groms Antwort fand. Danke für den Code.

Ich hatte Probleme zu verstehen, wie der Code verwendet werden sollte. (Ich verwende kein Versionskontrollsystem.) Zusammenfassend geben Sie den Zeitstempel (ts) an, wenn Sie das Stylesheet aufrufen. Sie planen nicht, das Stylesheet häufig zu ändern:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
Quelle