javascript - 如何让浏览器看到 CSS 和 Javascript 的变化？

Question

CSS 和 Javascript 文件不会经常更改，因此我希望将它们缓存在网络浏览器中。但我也希望 Web 浏览器能够看到对这些文件所做的更改，而无需用户清除其浏览器缓存。还需要一个与版本控制系统(如 Subversion)配合良好的解决方案。

---

Some solutions I have seen involve adding a version number to the end of the file in the form of a query string.

Could use the SVN revision number to automate this for you: ASP.NET Display SVN Revision Number

您能否指定如何包含 Revision另一个文件的变量？在 HTML 文件中，我可以在 CSS 或 Javascript 文件的 URL 中包含修订号。

在Subversion book它说关于修订:“这个关键字描述了这个文件在存储库中更改的最后一个已知修订”。

Firefox also allows pressing CTRL+R to reload everything on a particular page.

澄清一下，我正在寻找不需要用户自己做任何事情的解决方案。

Answer 1

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