如何使浏览器查看CSS和Javascript更改?
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
我们可以指定如何包括另一个文件的Revision变量吗?也就是说,在HTML文件中,我可以在CSS或者Javascript文件的URL中包含修订号。
在Subversion一书中,它谈到了修订:"此关键字描述了该文件在存储库中更改的最后一个已知修订"。
Firefox also allows pressing `CTRL`+`R` to reload everything on a particular page.
为了澄清,我正在寻找不需要用户自己做任何事情的解决方案。
解决方案
回答
我发现,如果将文件的最后修改的时间戳添加到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"; }
回答
我见过的一些解决方案涉及以查询字符串的形式在文件末尾添加版本号。
<script type="text/javascript" src="funkycode.js?v1">
我们可以使用SVN修订版号为我们自动执行此操作,方法是在上面的v1位置之后的HTML文件中添加单词LastChangedRevision。我们还必须设置存储库以执行此操作。
我希望这可以进一步澄清我的答案吗?
Firefox还允许按CTRL + R来重新加载特定页面上的所有内容。
回答
我认为,最好将版本号作为文件本身的一部分,例如myscript.1.2.3.js
。我们可以将网络服务器设置为永久缓存该文件,并且在拥有新版本时只需添加一个新的js文件。
回答
当我们发布新版本的CSS或者JS库时,导致发生以下情况:
- 修改文件名以包含唯一的版本字符串
- 修改引用库的HTML文件以指向版本文件
(对于发布脚本来说,这通常很简单)
现在,我们可以将CSS / JS的Expires设置为将来的几年。每当我们更改内容时,如果引用HTML指向新的URI,则浏览器将不再使用旧的缓存副本。
这将导致所需的缓存行为,而无需任何用户。
回答
当我找到grom的答案时,我还想知道如何执行此操作。感谢代码。
我在理解应该如何使用代码方面感到吃力。 (我不使用版本控制系统。)总而言之,在调用样式表时要包括时间戳(ts)。我们不打算经常更改样式表:
<?php include ('grom_file.php'); // timestamp on the filename has to be updated manually include_css('_stylesheets/style.css?ts=20080912162813', 'all'); ?>