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

原因分析:

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

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

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