让浏览器自动加载网页中最新的CSS和JS文件

7 月152014

作者：超级efly 发布：2014-07-15 15:14 分类：网络阅读：9,084

大家的网站往往都为一些静态文件（例如JS、CSS等）添加了缓存功能，但是如果我们更新了这些文件，想要及时加载最新的文件，怎么办呢？这篇文章就来教你如何清除浏览器中的缓存，并让浏览器加载网页中最新的CSS和JS，让访客使用到最新的功能！

教学

注意：在以下各方法中，你均需要将「http://www.example.com/style.css」改为你的CSS文件地址！

1、如果你只是偶尔需要更新一下文件，我们只需要在文件地址后面加入 ?ver=[任意文字] 即可，例如：

<link rel="stylesheet" href="http://www.example.com/style.css?ver=[任意文字]" />

1	<link rel="stylesheet" href="http://www.example.com/style.css?ver=[任意文字]" />

2、如果你想永远不要缓存该文件，我们可以将PHP获取当前的时间（UNIX格式）当作文件的版本，这样，浏览器不会缓存你的文件：

注意：使用该方法可能会严重拖慢网站速度！

<link rel="stylesheet" href="http://www.example.com/style.css?ver=<?php echo time(); ?>" />

1	<link rel="stylesheet" href="http://www.example.com/style.css?ver=<?php echo time(); ?>" />

3、如果你想要只有在文件更改后才更新缓存，只需将文件被版本设定为 filemtime （本函数将输出文件的最后更新时间）即可：

<?php $css = 'http://www.example.com/style.css'; ?>
<link rel="stylesheet" href="<?php echo $css; ?>?ver=<?php echo filemtime($css); ?>" />

1 2	<?php $css = 'http://www.example.com/style.css'; ?> <link rel="stylesheet" href="<?php echo $css; ?>?ver=<?php echo filemtime($css); ?>" />

4、如果你使用的WordPress系统，也可使用WordPress自带的 wp_enqueue_style 函数来载入CSS至头部：

function add_styles(){
	$css = 'http://www.example.com/style.css';
	wp_enqueue_style('style', $css, NULL, filemtime($css));
}
add_action('wp_enqueue_scripts', 'add_styles');

function add_styles(){

$css = 'http://www.example.com/style.css';

wp_enqueue_style('style', $css, NULL, filemtime($css));

}

add_action('wp_enqueue_scripts', 'add_styles');

教学

参考

历史上的今天

觉得这篇文章有用吗？分享一下让更多人受益吧！

您可能还会对这些文章感兴趣！