簡易克服 CSS 被瀏覽器快取(Cache)的問題

我們建置網站完成後,接下來就是將網站上線了,但當發現網站有問題要修改的時候,可能會遇到一個問題,就是當我們修改 JavaScript 或 CSS 的時候,預設的情況下 *.js 或 *.css 這類靜態網頁通常會被 Browser 快取(Cache)起來,除非你先主動清除這些快取資料,或人工將頁面重新整理才能讀到新的資料。但這個「人工手動」的動作客戶可無法接受!因為大部分網友不會知道需要做這個「重新整理」的步驟,看到的可能是錯誤的畫面、或 JavaScript 的問題。

一個最簡單的方法就是將 css 載入的地方加上「日期」或「版本編號」,請看下圖:

這是原本擺在 <head> 裡面的 CSS 與 JavaScript 宣告:

尚未修改前的 CSS, JavaScript

 加上版本編號就會變成這樣:

加上版本編號就會變成這樣

這兩個語法對 Web Server 來說是一樣的,因為這兩個檔都是「靜態頁面」;但是對 Browser 來說就不一樣了,因為 Browser 才不管你抓的是不是同一個檔案,對 Browser 來說唯一個依據就只有「網址」而已,所以只要是不同的網址就會重新向 Web Service 抓取新的檔案內容!

所以當修改網站的 CSS 或 JavaScript 後,你可以直接修改 ASP.NET 的 MasterPage 將檔案後面加上「日期」或「版本編號」就可以啦,一個最簡單、實用、好用又很少人知道的技巧喔!

 

  

此文章由 will 發表於 2008/2/3 下午 03:41:00

永久連結 | 評論 (3) | 此文章的RSSRSS comment feed |

分類: ASP.NET | CSS | JavaScript | Web

標籤: , , , , ,

收藏:

相關文章

評論

九月 2. 2008 02:46

ewei

您好:
因為我剛開始學動態網頁語言,現階段只會做靜態網頁...
我做了靜態網頁的網站,希望User每次到站,都會重新Reload一次,看到最新變更過的內容。
有沒有簡單的HTML code 或方法,可達到這個效果?



ewei tw

九月 2. 2008 09:20

will

HTML code 可以參考以下:
http://www.i18nguy.com/markup/metatags.html

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES"
CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">


除此之外,也可以搭配 JavaScript 或是設定 Web Server 的 HTTP Header 設定。

will tw

九月 2. 2008 10:38

ewei

昨天留言後,我自己看了一些網站的原始碼,用<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> 測試一下,每次就會重刷。
不過似乎3段一起加上比較好。
謝謝你的回答,和提供的學習方向。

ewei tw

新增評論


(將顯示您的Gravatar圖示)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



線上預覽

十月 14. 2008 06:08