微信中h5頁面用window.history.go(-1)返回上一頁頁面不會重新加載問題

問題描述：

　　　　在實際開發中遇到這樣一個問題，業務需求涉及到返回上一頁問題，第一時間想到了window.history.go(-1)方法，這樣做本身沒有任何問題，但是在微信中，安卓手機還好返回上一頁頁面會重新加載，而ios卻不會重新加載頁面，這就很難受了。

解決方案：

　　　　網上查閱了很多資料發現很多方法都不可行，那些方法就不一一展示了，直接上最終代碼。

 

window.addEventListener('pageshow', function(e) {
    // 通過persisted屬性判斷是否存在 BF Cache
    if (e.persisted) {
        location.reload();
    }
});

 

原理：pageShow事件在頁面顯示即會觸發，無論頁面是否來自BF Cache。通過檢測persisted屬性即可判斷是否存在 BF Cache 行為。
優點：大部分瀏覽器都支持pageShow方法與persisted屬性，並且需要的代碼量只需要短短4行即可。
缺點：每種瀏覽器中BF Cache的機制是不同的，部分瀏覽器中的Bf Cache還是會重新執行js代碼，會造成重復渲染效果。當然現在我們只考慮Ios中的微信頁面， 所以是不存在問題。

 

關於瀏覽器前進/后退緩存（BF Cache）問題詳細參考：http://harttle.land/2017/03/12/backward-forward-cache.html