Как я могу заставить браузер видеть изменения CSS и Javascript?

Файлы CSS и Javascript меняются не очень часто, поэтому я хочу, чтобы они кэшировались веб-браузером. Но я также хочу, чтобы веб-браузер видел изменения, внесенные в эти файлы, не требуя от пользователя очищать кеш браузера. Также нужно решение, которое хорошо работает с системой контроля версий, такой как Subversion.


Некоторые решения, которые я видел, включают добавление номера версии в конец файла в форме строки запроса.

Можно использовать номер редакции SVN, чтобы автоматизировать это для вас: ASP.NET Показать номер редакции SVN

Можете ли вы указать, как включить переменную Revision другого файла? То есть в файле HTML я могу включить номер редакции в URL к файлу CSS или Javascript.

В книге Subversion говорится о версии: «Это ключевое слово описывает последнюю известную версию, в которой этот файл был изменен в хранилище».

Firefox также позволяет нажимать CTRL+, Rчтобы перезагрузить все на определенной странице.

Чтобы уточнить, я ищу решения, которые не требуют от пользователя каких-либо действий с его стороны.

6.08.2008 09:38:15
5 ОТВЕТОВ
РЕШЕНИЕ

Я обнаружил, что если вы добавите последнюю измененную временную метку файла в конец URL-адреса, браузер запросит файлы при его изменении. Например в 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";
}
25
7.02.2016 14:04:38
привет, я попробовал этот метод. Тем не менее, я обнаружил, что после включения параметра браузер не кэширует файл CSS. Он загружает файл CSS каждый раз, когда я снова захожу на страницу, не кэшируя ее. Я обнаружил это, продолжая вносить изменения в файл CSS, чтобы увидеть, кэшируется ли файл CSS браузером. Я использую хром. Могу ли я узнать, как заставить браузер кэшировать файл css и загружать его только при изменении параметра? Спасибо.
davidlee 25.07.2010 13:32:42
@benmsia, вы смотрели, какие HTTP-заголовки возвращаются при запросе файла CSS?
grom 26.07.2010 23:38:55

Некоторые решения, которые я видел, включают добавление номера версии в конец файла в форме строки запроса.

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

Вы можете использовать номер ревизии SVN, чтобы автоматизировать это для вас , включив слово LastChangedRevision в ваш HTML-файл после того, как v1 появляется выше. Вы также должны настроить свой репозиторий, чтобы сделать это.

Надеюсь, это еще больше прояснит мой ответ?

Firefox также позволяет нажимать CTRL+, Rчтобы перезагрузить все на определенной странице.

10
23.05.2017 10:29:36

На мой взгляд, лучше сделать номер версии частью самого файла, например myscript.1.2.3.js. Вы можете настроить свой веб-сервер на постоянное кэширование этого файла и просто добавить новый файл js, когда у вас будет новая версия.

7
31.07.2017 11:33:39

Когда вы выпускаете новую версию своих библиотек CSS или JS, происходит следующее:

  1. изменить имя файла, чтобы включить уникальную строку версии
  2. изменить файлы HTML, которые ссылаются на библиотеку, чтобы указывать на версионный файл

(это обычно довольно простой вопрос для сценария выпуска)

Теперь вы можете установить Expires для CSS / JS на годы в будущем. Когда бы вы ни меняли содержимое, если ссылочный HTML-код указывает на новый URI, браузеры больше не будут использовать старую кэшированную копию.

Это вызывает желаемое поведение кеширования, не требуя ничего от пользователя.

6
9.08.2008 14:37:46

Мне также было интересно, как это сделать, когда я нашла ответ Грома. Спасибо за код.

Я боролся с пониманием, как код должен был использоваться. (Я не использую систему контроля версий.) В заключение, вы включаете метку времени (ts) при вызове таблицы стилей. Вы не планируете часто менять таблицу стилей:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
6
13.09.2008 16:54:51
?? функция include_css добавит последнюю модифицированную метку времени в файл в конец URL. Контроль версий не требуется.
grom 23.09.2008 12:38:24