2018年6月28日 星期四

讓瀏覽器或手機版瀏覽器強制更新(force reload)網頁的css,以讀取最新的css樣式修改

常常在線上維護網頁時發現css樣式表裡面已經做了修改
但是從瀏覽器看,還是讀到舊的。

電腦上的瀏覽器(如chrome)還能以開發者模式來強制網頁更新讀取新檔,
但是在手機版的瀏覽器就只能刪除cookie重來,不但操作步驟多麻煩,
而且也無法每次更新後都提醒網頁的瀏覽者去清cookie。
讓網頁瀏覽者可能無法即時看到網頁的樣式更新

只要在style連結的css檔案路徑後方加上變數即可使瀏覽器強制更新
以下紀錄兩個根據不同狀況可以使用的簡單方法

1.在css連結的後方加上任意的變數(v是變數名可任意取,後面2.0是隨意的數字)
如:<link  rel="stylesheet" type="text/css" href="./css/style.css?v=2.0">

2.在css連結後方加上時間參數(適合以php檔案做開發時測試用)
上面第一種方式,如果在開發時,每做一次樣式修改就要改一下變數的數字太過費工。
如果是以php寫網頁,那麼可以在css連結後方帶一個time()取得現在的時間。

如:<link  rel="stylesheet" type="text/css" href="./css/style.css?v=<?=time();?>">

因為每一次修改或重整網頁都會有時間差,所以經由time()函式取得當下操作的時間,
那麼v變數就會不斷改變。

第二種方式適合開發時測試使用,完成上線後還是以第一種方式為主,這樣瀏覽者才不用每次重新整理網頁都要讀一次css檔