1. 程式人生 > >IOS瀏覽器點選後退後,頁面空白

IOS瀏覽器點選後退後,頁面空白

問題場景:

專案中在別人的APP中嵌入一張卡片,作為入口進入自己專案的sdk, 需求是隻有高版本的使用者才能進入sdk,低版本的需要引導使用者更新APP

在APP和sdk之間,加入一個H5頁面,在APP中點選入口後,進入H5頁面,頁面內容是引導使用者更新,在H5頁面載入(window.onload)時,判斷APP傳來的版本號,如果是低版本,繼續渲染H5頁面,完成引導使用者更新。高版本則直接跳轉(window.location.href='')到sdk(此時H5頁面內容沒有渲染,是空白的)。

使用者從sdk頁面點選【後退】按鈕(原生的後退按鈕),回到H5,此時H5是空白的(原因是ios瀏覽器從快取中讀取了該頁面,因為第一次進入時沒有渲染出內容,所以後退回來後,也是空白的)

解決方法:

在頁面載入時使用window.onpageshow = function(event){

    if(event.persisted){ //event.persisted 判斷是否從快取裡讀取頁面,第一次載入時是false 返回後加載頁面時是true(因為從快取讀取的, 此時重新載入一邊頁面 )

        window.location.reload()

    }

}

如果是jQuery的話:

$(window).bind('pageshow',function(e){

    if(e.originalEvent.persisted){

        window.location.reload()

    }

})