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

CSS和Javascript文件不会经常更改,所以我希望它们可以通过Web浏览器进行缓存。但我也希望Web浏览器能够查看对这些文件所做的更改,而不需要用户清除浏览器缓存。还需要一个与Subversion等版本控制系统配合使用的解决方案。


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

     

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

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

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

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

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

0
额外 编辑
意见: 2

5 答案

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

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

您可以使用SVN修订版本号来自动执行此 ,方法是将 LastChangedRevision 在上面的v1出现在您的html文件中。您还必须设置您的存储库来执行此操作。

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

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

0
额外

我发现如果将文件的上次修改时间戳添加到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";
}
0
额外
@benmsia,你看过请求CSS文件时返回的HTTP头文件吗?
额外 作者 grom,
嗨格罗姆,我试过这种方法。然而,我发现,一旦我包含参数浏览器没有缓存的CSS文件。它每次重新访问页面时都会加载css文件而不缓存它。我通过继续在css文件中进行更改来检测此问题,以查看浏览器是否缓存css文件。我正在使用chrome。我可以知道如何让浏览器缓存css文件并只在参数发生变化时才加载?谢谢。
额外 作者 davidlee,

在我看来,最好将版本号作为文件本身的一部分,例如<�代码> myscript.1.2.3.js </代码>。您可以将您的网络服务器设置为永久缓存该文件,只需添加新的js文件即可。

0
额外

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

我努力了解代码应该如何使用。 (我没有使用版本控制系统。)总之,在调用样式表时包含时间戳(ts)。你不打算经常改变样式表:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
0
额外
?? include_css函数会将文件上最后一次修改的时间戳附加到url的末尾。不需要版本控制。
额外 作者 grom,

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

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

(这对于发布脚本通常是一件非常简单的事情)

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

这会导致所需的缓存行为,而不需要用户的任何操作。

0
额外