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

CSS and Javascript files don't change very often, so I want them to be cached by the web browser. But I also want the web browser to see changes made to these files without requiring the user to clear their browser cache. Also want a solution that works well with a version control system such as Subversion.

CSS和Javascript文件不会经常更改，所以我希望web浏览器缓存它们。但是，我还希望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

可以使用SVN修订号为您自动化这个:ASP。NET显示SVN修订号。

Can you specify how you include the Revision variable of another file? That is in the HTML file I can include the Revision number in the URL to the CSS or Javascript file.

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

In the Subversion book it says about Revision: "This keyword describes the last known revision in which this file changed in the repository".

在Subversion这本书中，它提到了修订:“这个关键字描述了这个文件在存储库中更改的最新版本”。

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

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

To clarify I am looking for solutions that don't require the user to do anything on their part.

为了澄清这一点，我正在寻找不需要用户做任何事情的解决方案。

5 个解决方案

#1

I found that if you append the last modified timestamp of the file onto the end of the URL the browser will request the files when it is modified. For example in PHP:

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

#2

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

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

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

You could use the SVN revision number to automate this for you by including the word LastChangedRevision in your html file after where v1 appears above. You must also setup your repository to do this.

您可以使用SVN修订号，在上面的v1出现之后，在html文件中包含LastChangedRevision这个词，从而自动实现这一点。您还必须设置存储库来实现这一点。

I hope this further clarifies my answer?

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

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

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

#3

In my opinion, it is better to make the version number part of the file itself e.g. myscript.1.2.3.js. You can set your webserver to cache this file forever, and just add a new js file when you have a new version.

在我看来，最好将版本号作为文件本身的一部分，例如myscript.1.2.3.js。你可以设置你的webserver永久缓存这个文件，当你有一个新版本的时候添加一个新的js文件。

#4

When you release a new version of your CSS or JS libraries, cause the following to occur:

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

modify the filename to include a unique version string
修改文件名以包含唯一的版本字符串
modify the HTML files which reference the library to point at the versioned file
修改引用库的HTML文件，指向版本化的文件

(this is usually a pretty simple matter for a release script)

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

Now you can set the Expires for the CSS/JS to be years in the future. Whenever you change the content, if the referencing HTML points to a new URI, browsers will no longer use the old cached copy.

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

This causes the caching behavior you want without requiring anything of the user.

这将导致您想要的缓存行为，而不需要任何用户。

#5

I was also wondering how to do this, when I found grom's answer. Thanks for the code.

当我发现grom的答案时，我也在想该怎么做。谢谢你的代码。

I struggled with understanding how the code was supposed to be used. (I don't use a version control system.) In summary, you include the timestamp (ts) when you call the stylesheet. You're not planning on changing the stylesheet often:

我很难理解代码应该如何使用。(我不使用版本控制系统。)总之，您在调用样式表时包括时间戳(ts)。您不打算经常更改样式表:

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

#1