我怎么能让浏览器查看CSS和Javascript的变化?
-
08-06-2019 - |
题
CSS和Javascript文件不经常变化的,因此我希望他们能够缓存的网络浏览器。但我也想要的网络浏览器看到的变化对这些文件,而不需要用户,以明确他们的浏览器高速缓存。还想要一个解决方案,可以与一个版本控制系统,诸如颠复活动。
一些解决方案我见过的涉及添加一个版本的编号,以结束该文件的形式query string.
可以使用的SVN修订编号,以实现自动化,这对你: ASP.NET 显示SVN修订号
你可以指定如何包括的 修订 可变的另一个文件?这是在HTML文件,我可以包括修订数量,在该网址的CSS或Javascript文件。
在 颠复本书 它说,关于修订:"这个关键词描述了已知的最后修订这一文件改变了在储存库".
火狐还允许按压 CTRL+R 重新载入的一切在一个特定的网页。
澄清我在寻找解决方案不需要用户,以做任何事对他们的一部分。
解决方案
我发现如果你追加的最后一次修改时间戳记的文件到底的网址浏览器将要求文件时,它被修改。例如在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";
}
其他提示
一些解决方案我见过的涉及添加一个版本的编号,以结束该文件的形式query string.
<script type="text/javascript" src="funkycode.js?v1">
你可以使用的SVN修订编号,以实现自动化这个 对于你 通过包括这个词 LastChangedRevision 在html文件后,在那里v1出现以上。还必须设置库来这样做。
我希望这种进一步的澄清,我的答案吗?
火狐还允许按压 CTRL + R 重新载入的一切在一个特定的网页。
在我看来,它是更好地使该版本数量的一部分,例如文件本身 myscript.1.2.3.js
.你可以设置的网络服务器,高速缓存这一文件,直到永远,只是添加一个新的js文件的时候你有一个新的版本。
当你发布一个新版本的你CSS或JS库,导致以下发生:
- 修改该文件包括一个独特的版本字符串
- 修改HTML文件,这些文件的参考图书馆点版本的文件
(这通常是一个相当简单的问题,释放脚本)
现在你可以设置过期的CSS/JS是年的未来。只要你改变内容,如果引用HTML指向一个新的URI,浏览器将不再使用的旧缓存的副本。
这导致缓存的行为,而不需要任何东西的用户。
我也不知道如何做到这一点,当我找到格罗姆的答复。谢谢你的代码。
我努力了解如何代码应该是使用。(我不会用一个版本控制系统。) 在摘要,包括timestamp(ts)当你打电话的样式表。你没有计划改变的样式表中的往往是:
<?php
include ('grom_file.php');
// timestamp on the filename has to be updated manually
include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>