讓瀏覽器自動加載網頁中最新的CSS和JS文件

7 月152014

作者：超級efly 發布：2014-07-15 15:14 分類：網絡閱讀：9,067

大家的網站往往都為一些靜態文件（例如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');

教學

參考

歷史上的今天

覺得這篇文章有用嗎？分享一下讓更多人受益吧！

您可能還會對這些文章感興趣！