聘我网

新概念招聘3.0

使浏览器自动重新加载css/js文件的最好方法是什么?

vote up0vote downstar

我注意到一些浏览器(特别是firefox和opera)非常热衷于使用缓存下来的.css/.js文件,这样一来,即使你的版本已经更新,浏览器还是使用的老版本。。。

所以问题是:怎么让浏览器在css/js文件发生改动时自动重新加载?

理想情况是该解决方案不会迫使浏览器在每次访问网页的时候都重新加载。

 

1 个答复

vote up0vote downcheck

auto-versioning的实现方案如下:

首先,在httpd.conf或者.htaccess中开启urlrewrite规则

RewriteEngine on
RewriteRule ^(.*)\.[\d]+\.(css|js)$ $1.$2 [L]

其中[L]表示如果该条规则匹配,将忽略其他规则。可参考这里

The [L] flag causes mod_rewrite to stop processing the rule set. In most contexts, this means that if the rule matches, no further rules will be processed.

接着,使用下面的PHP代码:

function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

以后,诸如下面的代码:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

改成:

<link rel="stylesheet" href="<?=auto_version('/css/base.css')?>" type="text/css" />\

这样,你不需要再改动任何代码,用户将始终使用最新版本的文件,因为当文件版本变动时,url也会改变。

其实该方法也适合其他类型的文件,不仅仅css、js

链接

您的回答





不是您要找的问题? 浏览其他含有标签 的问题或者 自己问个.