原因分析:
- android 瀏覽器 包括微信的開(kāi)發(fā)者工具 都是ok的返回可以刷新頁(yè)面但是唯有iOS不行.
- 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).
- 頁(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ù)。
解決方法:
- 方案一
window.addEventListener('pageshow', function (event) {
if (event.persisted || window.performance &&
window.performance.navigation.type == 2)
{
location.reload();
}
},false);
- 方案二
$(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ù)。