問題背景
今天有一個刷新的需求,先後使用了reload()、replace 方法以及window.location.href三種方式,結果都只是在pc端沒問題,移動端微信中瀏覽失敗。之後在相應js中加了alert事件,結果發現僅在第一次進入頁面時執行了,再次刷新時並未執行,故目前懷疑是微信中默認緩存了靜態資源。
至於用懷疑一詞,是由於在網上找了好久,基本都只說了方案,對於產生原因卻很少有人提及,另根據reload()的說明,當有參數true時(即reloa(true)),瀏覽器應當已經繞過緩存重新從服務器獲取了一份,但實際在微信中瀏覽發現js文件依舊未重新執行,故目前僅是懷疑狀態,尚未找到真正原因所在。
解決方案
目前使用的解決方案爲在地址後面添加隨機數,從而欺騙瀏覽器url改變了,使其向服務器發送請求而不去讀緩存。
實現代碼
var len = window.location.href.indexOf("?"); if(len>0){ window.location.href=window.location.href.substring(0,len)+"?"+Math.random(); }else{ window.location.href=window.location.href+"?"+Math.random(); }
代碼註釋:
先創建一個len用來存儲地址中?的位置,當大於0,說明不是第一次進入,故截取出當前地址並在後面拼接隨機數,反之直接拼接隨機數。具體使用方式請根據個人需求自行修改。
課外延伸
1、頁面刷新
reload 方法
該方法強迫瀏覽器刷新當前頁面。
語法
location.reload(force)
說明
如果該方法沒有規定參數,或者參數是 false,它就會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變。如果文檔已改變,reload() 會再次下載該文檔。如果文檔未改變,則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。
如果把該方法的參數設置爲 true,那麼無論文檔的最後修改日期是什麼,它都會繞過緩存,從服務器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣。
replace 方法
語法
location.replace(newURL)
說明
replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時,新的 URL 將覆蓋 History 對象中的當前記錄。
該方法通過指定URL替換當前緩存在歷史裏(客戶端)的項目,因此當使用replace方法之後,你不能通過“前進”和“後退”來訪問已經被替換的URL。
實際應用場景
(此處來源網絡,請酌情參考)
在實際應用的時候,重新刷新頁面的時候,我們通常使用: location.reload() 或者是 history.go(0) 來做。
因爲這種做法就像是客戶端點F5刷新頁面,所以頁面的method="post"的時候,會出現"網頁過期"的提示。那是因爲Session的安全保護機制。
可以想到: 當調用 location.reload() 方法的時候, aspx頁面此時在服務端內存裏已經存在, 因此必定是 IsPostback 的。
如果有這種應用: 我們需要重新加載該頁面,也就是說我們期望頁面能夠在服務端重新被創建, 我們期望是 Not IsPostback 的。這裏,location.replace() 就可以完成此任務。被replace的頁面每次都在服務端重新生成。
2、字符串截取
substring() 方法
substring() 方法用於提取字符串中介於兩個指定下標之間的字符。
語法
stringObject.substring(start,stop)
參數 | 描述 |
---|---|
start | 必需。一個非負的整數,規定要提取的子串的第一個字符在 stringObject 中的位置。 |
stop | 可選。一個非負的整數,比要提取的子串的最後一個字符在 stringObject 中的位置多 1。 如果省略該參數,那麼返回的子串會一直到字符串的結尾。 |
返回值
一個新的字符串,該字符串值包含 stringObject 的一個子字符串,其內容是從 start 處到 stop-1 處的所有字符,其長度爲 stop 減start。
說明
substring() 方法返回的子串包括 start 處的字符,但不包括 stop 處的字符。
如果參數 start 與 stop 相等,那麼該方法返回的就是一個空串(即長度爲 0 的字符串)。如果 start 比 stop 大,那麼該方法在提取子串之前會先交換這兩個參數。
提示和註釋
重要事項:與 slice() 和 substr() 方法不同的是,substring() 不接受負的參數。
substr() 方法
substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。
語法
stringObject.substr(start,length)
參數 | 描述 |
---|---|
start | 必需。要抽取的子串的起始下標。必須是數值。如果是負數,那麼該參數聲明從字符串的尾部開始算起的位置。也就是說,-1 指字符串中最後一個字符,-2 指倒數第二個字符,以此類推。 |
length | 可選。子串中的字符數。必須是數值。如果省略了該參數,那麼返回從 stringObject 的開始位置到結尾的字串。 |
返回值
一個新的字符串,包含從 stringObject 的 start(包括 start 所指的字符) 處開始的 length 個字符。如果沒有指定 length,那麼返回的字符串包含從 start 到 stringObject 的結尾的字符。
提示和註釋
註釋:substr() 的參數指定的是子串的開始位置和長度,因此它可以替代 substring() 和 slice() 來使用。
重要事項:ECMAscript 沒有對該方法進行標準化,因此反對使用它。
重要事項:在 IE 4 中,參數 start 的值無效。在這個 BUG 中,start 規定的是第 0 個字符的位置。在之後的版本中,此 BUG 已被修正。
slice() 方法
slice() 方法可提取字符串的某個部分,並以新的字符串返回被提取的部分。
語法
stringObject.slice(start,end)
參數 | 描述 |
---|---|
start | 要抽取的片斷的起始下標。如果是負數,則該參數規定的是從字符串的尾部開始算起的位置。也就是說,-1 指字符串的最後一個字符,-2 指倒數第二個字符,以此類推。 |
end | 緊接着要抽取的片段的結尾的下標。若未指定此參數,則要提取的子串包括 start 到原字符串結尾的字符串。如果該參數是負數,那麼它規定的是從字符串的尾部開始算起的位置。 |
返回值
一個新的字符串。包括字符串 stringObject 從 start 開始(包括 start)到 end 結束(不包括 end)爲止的所有字符。
說明
String 對象的方法 slice()、substring() 和 substr() (不建議使用)都可返回字符串的指定部分。
slice() 比 substring() 要靈活一些,因爲它允許使用負數作爲參數。
slice() 與 substr() 有所不同,因爲它用兩個字符的位置來指定子串,而 substr() 則用字符位置和長度來指定子串。
還要注意的是,String.slice() 與 Array.slice() 相似。