微信中蘋果h5頁面用window.history.go(-1)返回上一頁頁面不會重新載入/重新整理
阿新 • • 發佈:2018-11-10
微信中h5頁面用window.history.go(-1)返回上一頁頁面不會重新載入問題 問題描述: 在實際開發中遇到這樣一個問題,業務需求涉及到返回上一頁問題,第一時間想到了window.history.go(-1)方法,這樣做本身沒有任何問題,但是在微信中,安卓手機還好返回上一頁頁面會重新載入,而ios卻不會重新載入頁面,這就很難受了。 解決方案: 網上查閱了很多資料發現很多方法都不可行,那些方法就不一一展示了,直接上最終程式碼。 window.addEventListener('pageshow', function(e) { // 通過persisted屬性判斷是否存在 BF Cache if (e.persisted) { location.reload(); } }); 因為我做的邏輯是在下一個要頁面,進行儲存咋 sesstion 裡面,然後window.history.go(-1) 返回獲取賦值,因為IOS 返回無法重現載入,利用上面程式碼進行了下修改 window.addEventListener('pageshow', function(e) { // 通過persisted屬性判斷是否存在 BF Cache if (e.persisted) { var objData=JSON.parse(sessionStorage.getItem('lolData')); if(objData){ $('#origin-place').val(objData.start_place); //賦值 $('#obj-place').val(objData.end_place); //賦值 } } }); 這裡有人會說直接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