當網站的 CSS 及 Javascript (.css 及 .js) 作出修改後,這些更新可能不會立即呈現及訪客,這是因為瀏覽器為了提高開啟網站的速度,會將 .js 及 .css 檔儲存在快取內,下次進入網站時不會重新載入所致。
網站訪客可以清除網站的快取然後重新載入,便會看到新內容。但網站管理員總不能要求每個訪客這樣做,需要在網頁的層面解決。
一個簡單的解法是在 HTML 的 Meta Tag 加入控制快取的指示,例如:
1 2 |
<meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> |
但這個方法很多時都不會長時間有效。
另一個較簡單實用的方法是在檔名後面加上一個 GET 變數,這個 GET 變數可以是日期時間,也可以是版本號,例如:
1 2 |
<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 變數:
1 |
<link rel="stylesheet" type="text/css" href="style.css?version=<?php echo time(); ?>"> |
如果網頁不是用 PHP 開發,可以用 Javascript 來完成:
1 2 3 4 5 6 7 |
<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 檔使用。