移動端返回強制刷新頁面pageshow事件persisted總爲false解決方案

返回後頁面不刷新，一些失效的信息依然顯示在頁面上。這個問題在iphone手機上會出現，在Android手機上返回時會自動刷新（因爲手機機器種類很少，沒法作更多測試，歡迎補充）。

爲了解決這個問題實驗了不少解決辦法用計時器呀onload呀都不行，後來找到了一個方法pageshow。

onpageshow 事件在用戶瀏覽網頁時觸發。

onpageshow 事件相似於 onload 事件，onload 事件在頁面第一次加載時觸發， onpageshow 事件在每次加載頁面時觸發，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發，此外還有pagehide在不顯示的時候觸發。

爲了查看頁面是直接從服務器上載入仍是從緩存中讀取，可使用 PageTransitionEvent 對象的 persisted 屬性來判斷。

window.addEventListener('pageshow', function(event) {
    console.log("PageShow Event " + event.persisted);
    console.log(event)
})
複製代碼

若是頁面從瀏覽器的緩存中讀取該屬性返回 ture，不然返回 false。而後在根據true或false在執行相應的頁面刷新動做或者直接ajax請求接口更新數據。這一點有個缺陷就是，不管是否是須要更新數據這個頁面都會刷新，咱們要作的只是數據變化了才須要更新。因而想到另外一個辦法在可能會出現數據變化的頁面設置緩存，即爲只要頁面數據變化了就寫緩存一條記錄，在返回頁面後檢測到這條記錄就說明須要頁面刷新或調用接口刷新。

處理方法爲：

// a.html 設置刷新 檢測緩存是否有標誌 要是有就說明數據有變化  a.html跳轉到b.html頁面
window.addEventListener("pageshow", function(){
    if(sessionStorage.getItem("need-refresh")){
        location.reload();
        sessionStorage.removeItem("need-refresh");
    }
});

// b.html 若是是數據變化了就寫一條緩存   b.html返回到a.html頁面
sessionStorage.setItem("need-refresh", true);
複製代碼

---

最近在項目中使用pageshow，發現頁面返回的時候persisted依然爲false，這時候只好找其餘方案解決。 這時候發現有一個window.performance對象，performance.navigation.type是一個無符號短整型

• TYPE_NAVIGATE (0)：

當前頁面是經過點擊連接，書籤和表單提交，或者腳本操做，或者在url中直接輸入地址，type值爲0

• TYPE_RELOAD (1)

點擊刷新頁面按鈕或者經過Location.reload()方法顯示的頁面，type值爲1

• TYPE_BACK_FORWARD (2)

頁面經過歷史記錄和前進後退訪問時。type值爲2

• TYPE_RESERVED (255)

任何其餘方式，type值爲255 這真是咱們須要的部分，因而能夠預見，解決方案以下：

window.addEventListener('pageshow', () => {
  if (e.persisted || (window.performance && 
    window.performance.navigation.type == 2)) {
    location.reload()
  }
}, false)
複製代碼

stackoverflow.com/questions/1…