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

голоса
40

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


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

Может использовать номер ревизии SVN автоматизировать это для вас: ASP.NET Display SVN номер ревизии

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

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

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

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

Задан 06/08/2008 в 10:38
источник пользователем
На других языках...                            


5 ответов

голоса
20

Я обнаружил, что если вы добавите последнее изменение временной метки файла на конец 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";
}
Ответил 06/08/2008 в 10:41
источник пользователем

голоса
9

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

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

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

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

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

Ответил 06/08/2008 в 10:52
источник пользователем

голоса
6

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

Ответил 06/08/2008 в 22:33
источник пользователем

голоса
5

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

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

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
Ответил 13/09/2008 в 17:54
источник пользователем

голоса
5

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

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

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

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

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

Ответил 09/08/2008 в 15:37
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more