iOS設(shè)備 微信h5頁面回退 內(nèi)容不刷新的問題

原因分析:

  1. android 瀏覽器 包括微信的開發(fā)者工具 都是ok的返回可以刷新頁面但是唯有iOS不行.
  2. iOS 瀏覽器原因:history.go(-1)返回上一頁后,頁面內(nèi)容并不會刷新。在B頁面修改的內(nèi)容,返回到A時并沒有更新新的內(nèi)容,必須手動刷新。
    在Debug模式下,發(fā)現(xiàn)在iOS瀏覽器中,返回上一頁后,頁面的 JS 代碼并未執(zhí)行。我們猜測可能是緩存引起的,于是使用 meta 禁止了緩存,但仍然沒有效果。于是進(jìn)一步猜測可能是瀏覽器內(nèi)部機制導(dǎo)致——iOS為了提升瀏覽網(wǎng)頁的效率,可能給已瀏覽過的網(wǎng)頁添加一個類似快照的東西,當(dāng)點擊返回按鈕后,直接調(diào)用快照展示給用戶,省去了執(zhí)行JS這一步驟(純靜態(tài)文件依然被緩存)。這本來是iOS的優(yōu)勢,在這卻變成了bug存在的風(fēng)險.
  3. 頁面數(shù)據(jù)是通過 ajax 請求后臺數(shù)據(jù),通過鏈接跳到下一頁,然后返回,
    最常用的返回上一頁的方法:history.go(-1)和 history.back(),
    在 android 中正常顯示上一頁,但是在 iOS 中不能正常顯示,通過打印
    返回的數(shù)據(jù),發(fā)現(xiàn)數(shù)據(jù)是上一個頁面最后請求的數(shù)據(jù)。

解決方法:

  1. 方案一
window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && 
            window.performance.navigation.type == 2) 
        {
            location.reload();
        }
    },false);
  1. 方案二
$(function () {
  let isPageHide = localStorage.getItem("need-refresh")
  window.addEventListener('pageshow', function () {
    if (isPageHide) {
      window.location.reload() // 刷新頁面
      localStorage.removeItem("need-refresh");
    }
  })

  window.addEventListener('pagehide', function () {
    localStorage.setItem("need-refresh",true);
  })
})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容