您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

JavaScript如何强制浏览器重新加载缓存的CSS / JS文件?

JavaScript如何强制浏览器重新加载缓存的CSS / JS文件?

更新: 重写以合并John Millikin和da5id的建议。该解决方案是用PHP编写的,但应易于适应其他语言。

更新2:结合尼克·约翰逊(Nick Johnson)的意见,即原始.htaccess正则表达式可能会导致文件问题json-1.3.js解决方案是仅在末尾恰好有10位数字时才重写。(因为10位数字涵盖了从9/9/2001到11/20/2286的所有时间戳。)

首先,我们在.htaccess中使用以下重写规则:

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

现在,我们编写以下PHP函数

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
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);
}

现在,无论你在哪里包含CSS,都可以从以下位置进行更改:

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

对此:

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

这样,你无需再次修改link标记,并且用户将始终看到最新的CSS。浏览器将能够缓存CSS文件,但是当你对CSS进行任何更改时,浏览器会将其视为新的URL,因此它将不使用缓存的副本。

这也可以用于图像,图标和JavaScript。基本上任何不是动态生成的。

javascript 2022/1/1 18:24:32 有307人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶