如何让浏览器看到CSS和Javascript的变化?

CSS和Javascript文件不会经常更改,所以我希望它们能够被网页浏览器caching。 但是我也希望Web浏览器能够看到对这些文件所做的更改,而不需要用户清除浏览器caching。 还需要一个与Subversion等版本控制系统配合使用的解决scheme。


我已经看到的一些解决scheme涉及以查询string的forms在文件末尾添加版本号。

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

你可以指定如何包含另一个文件的版本variables? 这是在HTML文件中,我可以在URL或CSS文件中包含版本号。

在Subversion的书中提到了Revision:“这个关键字描述了这个文件在版本库中更改的最后一个已知版本”。

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

澄清我正在寻找的解决scheme,不要求用户做任何事情。

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

我已经看到的一些解决scheme涉及以查询string的forms在文件末尾添加版本号。

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

您可以使用SVN修订版本号码,在上面的v1出现之后,在您的html文件中包含LastChangedRevision这个字词。 您还必须设置您的存储库来执行此操作。

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

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

在我看来,最好将文件本身的版本号作为myscript.1.2.3.js 。 你可以设置你的networking服务器永久caching这个文件,只需要添加一个新的js文件,当你有一个新的版本。

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

  1. 修改文件名以包含一个唯一的版本string
  2. 修改引用库的HTML文件以指向版本化文件

(这通常是一个发布脚本很简单的问题)

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

这会导致您想要的caching行为,而不需要用户的任何东西。

当我发现格罗姆的答案时,我也想知道如何做到这一点。 感谢代码。

我很难理解代码是如何被使用的。 (我不使用版本控制系统。)总之,在调用样式表时包含时间戳(ts)。 你不打算经常改变样式表:

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