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

StackOverflow https://stackoverflow.com/questions/3224

  •  08-06-2019
  •  | 
  •  

Вопрос

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


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

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

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

В Книга о подрывной деятельности там говорится о Пересмотре:"Это ключевое слово описывает последнюю известную ревизию, в которой этот файл изменялся в репозитории".

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

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

Это было полезно?

Решение

Я обнаружил, что если вы добавите метку времени последнего изменения файла в конец 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";
}

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top