堕落不振功业废,勤耕不辍日月新

強制瀏覽器每次重新載入 CSS, JS 檔

JAVA hailen 28℃

當網站的 CSS 及 Javascript (.css 及 .js) 作出修改後,這些更新可能不會立即呈現及訪客,這是因為瀏覽器為了提高開啟網站的速度,會將 .js 及 .css 檔儲存在快取內,下次進入網站時不會重新載入所致。

網站訪客可以清除網站的快取然後重新載入,便會看到新內容。但網站管理員總不能要求每個訪客這樣做,需要在網頁的層面解決。

一個簡單的解法是在 HTML 的 Meta Tag 加入控制快取的指示,例如:

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

但這個方法很多時都不會長時間有效。

另一個較簡單實用的方法是在檔名後面加上一個 GET 變數,這個 GET 變數可以是日期時間,也可以是版本號,例如:

<link rel="stylesheet" type="text/css" href="style.css?version=1.0">
 	<script src="myscripts.js?version=1.0"></script>

當下次修改 CSS 或 JS 後,在網站的 HTML 修改這個版本號即可。

如果在 PHP 的網頁,可以用以下方法,每次自動定義一個新的 GET 變數:

<link rel="stylesheet" type="text/css" href="style.css?version=&lt;?php echo time(); ?&gt;">

如果網頁不是用 PHP 開發,可以用 Javascript 來完成:

<script type="text/javascript" language="javascript">
    var versionUpdate = (new Date()).getTime();
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "/myProduct/scripts/myUpdates.js?v=" + versionUpdate;
    document.body.appendChild(script);
</script>

但這個加上 GET 變數的方法也是有缺點的,因為每次都會重新載入 CSS 及 JS, 對伺服器產生較多連線,以及訪客會用多一點時間載入網頁,所以最好只選擇一些較常改動的 CSS 及 JS 檔使用。

The post 強制瀏覽器每次重新載入 CSS, JS 檔 appeared first on Linux 技術手札.

转载请注明:我是IT » 強制瀏覽器每次重新載入 CSS, JS 檔

喜欢 (0)or分享 (0)