微信瀏覽器中reload()無法完成刷新頁面的解決方案

問題背景

今天有一個刷新的需求,先後使用了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 處的所有字符,其長度爲 stopstart

說明

substring() 方法返回的子串包括 start 處的字符,但不包括 stop 處的字符。

如果參數 startstop 相等,那麼該方法返回的就是一個空串(即長度爲 0 的字符串)。如果 startstop 大,那麼該方法在提取子串之前會先交換這兩個參數。

提示和註釋

重要事項:與 slice() 和 substr() 方法不同的是,substring() 不接受負的參數。

substr() 方法

substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。

語法

stringObject.substr(start,length)

參數

描述

start

必需。要抽取的子串的起始下標。必須是數值。如果是負數,那麼該參數聲明從字符串的尾部開始算起的位置。也就是說,-1 指字符串中最後一個字符,-2 指倒數第二個字符,以此類推。

length

可選。子串中的字符數。必須是數值。如果省略了該參數,那麼返回從 stringObject 的開始位置到結尾的字串。

返回值

一個新的字符串,包含從 stringObjectstart(包括 start 所指的字符) 處開始的 length 個字符。如果沒有指定 length,那麼返回的字符串包含從 startstringObject 的結尾的字符。

提示和註釋

註釋: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() 相似。

參考資料

解決微信瀏覽器無法使用reload()刷新頁面

HTML DOM reload() 方法

HTML DOM replace() 方法

JS刷新當前頁面的幾種方法總結

JavaScript substring() 方法

JavaScript substr() 方法

JavaScript slice() 方法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章