js清除瀏覽器快取的幾種方法
阿新 • • 發佈:2019-02-08
一、CSS和JS為什麼帶引數(形如.css?t=與.js?t=)怎樣獲取程式碼
css和js帶引數(形如.css?t=與.js?t=)
使用引數有兩種可能:
第一、指令碼並不存在,而是服務端動態生成的,因此帶了個版本號,以示區別。 即上面程式碼對於檔案來說 等價於 但瀏覽器會認為他是 該檔案的某個版本!
第二、客戶端會快取這些css或js檔案,因此每次升級了js或css檔案後,改變版本號,客戶端瀏覽器就會重新下載新的js或css檔案 ,刷性快取的作用。
第二種情況最多,也可能兩種同時存在。
版本號,可以是一個隨機數,也可以是一個遞增的值,大版本小版本的方式,或者根據指令碼的生成時間書寫,比如就是精確到了生成指令碼的秒,而 2.3.3 就是大版本小版本的方式。
二、關於瀏覽器快取
瀏覽器快取,有時候我們需要他,因為他可以提高網站效能和瀏覽器速度,提高網站效能。但是有時候我們又不得不清除快取,因為快取可能誤事,出現一些錯誤的資料。像股票類網站實時更新等,這樣的網站是不要快取的,像有的網站很少更新,有快取還是比較好的。今天主要介紹清除快取的幾種方法。
清理網站快取的幾種方法
meta方法
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
清理form表單的臨時快取
方式一:用ajax請求伺服器最新檔案,並加上請求頭If-Modified-Since和Cache-Control,如下:
$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control" ,"no-cache");
},
success:function(response){
//操作
}
async:false
});
方法二,直接用cache:false,
$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
cache:false,
ifModified :true ,
success:function(response){
//操作
}
async:false
});
方法三:用隨機數,隨機數也是避免快取的一種很不錯的方法!
URL 引數後加上 "?ran=" + Math.random(); //當然這裡引數 ran可以任意取了
eg:
<script>
document.write("<s"+"cript type='text/javascript' src='/js/test.js?"+Math.random()+"'></scr"+"ipt>");
</script>
其他的類似,只需在地址後加上+Math.random()
注意:因為Math.random() 只能在Javascript 下起作用,故只能通過Javascript的呼叫才可以
方法四:用隨機時間,和隨機數一樣。
在 URL 引數後加上 "?timestamp=" + new Date().getTime();
用php後端清理
在服務端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)
方法五:
5、window.location.replace("WebForm1.aspx");
引數就是你要覆蓋的頁面,replace的原理就是用當前頁面替換掉replace引數指定的頁面。
這樣可以防止使用者點選back鍵。使用的是javascript指令碼,舉例如下:
a.html
以下是引用片段:
<html>
<head>
<title>a</title>
<script language="javascript">
function jump(){
window.location.replace("b.html");
}
</script>
</head>
<body>
<a href="javascript:jump()">b</a>
</body>
</html>
b.html
以下是引用片段:
<html>
<head>
<title>b</title>
<script language="javascript">
function jump(){
window.location.replace("a.html");
}
</script>
</head>
<body>
<a href="javascript:jump()">a</a>
</body>
</html>