如何使浏览器看到CSS和Javascript的更改?

Translate

CSS和Javascript文件不会经常更改,因此我希望它们由Web浏览器缓存。但是我也希望Web浏览器能够看到对这些文件所做的更改,而无需用户清除其浏览器缓存。还需要一种与版本控制系统(例如Subversion)一起使用的解决方案。


我见过的一些解决方案涉及以查询字符串的形式在文件末尾添加版本号。

可以使用SVN版本号为您自动执行此操作:ASP.NET显示SVN修订版号

您能否指定如何包括修订版另一个文件的变量?也就是说,在HTML文件中,我可以在CSS或Javascript文件的URL中包含修订号。

在里面颠覆书它说到修订:“此关键字描述了该文件在存储库中更改的最后一个已知修订”。

Firefox也允许按CTRL键+R重新加载特定页面上的所有内容。

为了明确起见,我正在寻找不需要用户自己做任何事情的解决方案。

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

所有的回答

Translate

我发现,如果将文件的最后修改的时间戳附加到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";
}
来源
Translate

我见过的一些解决方案涉及以查询字符串的形式在文件末尾添加版本号。

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

您可以使用SVN版本号自动执行此操作为了你通过包括这个词LastChangedRevision在您的html文件中,在上方出现了v1之后。您还必须设置存储库以执行此操作。

我希望这可以进一步澄清我的答案吗?

Firefox也允许按CTRL键+R重新加载特定页面上的所有内容。

来源
Translate

我认为,最好将版本号作为文件本身的一部分,例如myscript.1.2.3.js。您可以将您的网络服务器设置为永久缓存该文件,而在拥有新版本时只需添加一个新的js文件。

来源
Translate

当您发布新版本的CSS或JS库时,导致发生以下情况:

  1. 修改文件名以包含唯一的版本字符串
  2. 修改引用库的HTML文件以指向版本文件

(对于发布脚本,这通常很简单)

现在,您可以将CSS / JS的Expires设置为将来的几年。每当您更改内容时,如果引用HTML指向新的URI,浏览器将不再使用旧的缓存副本。

这将导致所需的缓存行为,而无需任何用户。

来源
Translate

当我找到grom的答案时,我还想知道如何执行此操作。感谢您的代码。

我在理解应如何使用代码方面感到困惑。 (我不使用版本控制系统。)总之,在调用样式表时,要包括时间戳(ts)。您不打算经常更改样式表:

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