解決非chrome瀏覽器(移動(dòng)端適用)后退刷新問題

tips:接下去會(huì)在github寫博客,簡書不再更新和修改文章,歡迎大家逛逛我的新博客點(diǎn)擊查看 ,我會(huì)盡量用更容易理解的方式寫好每一篇博客,大家一起學(xué)習(xí)交流??。

寫頁面時(shí)你可能會(huì)遇到這個(gè)問題,就是用Firefox,Safari,IE等非chrome瀏覽器,點(diǎn)擊瀏覽器自帶的返回鍵會(huì)發(fā)現(xiàn)不會(huì)刷新頁面,因?yàn)槟菚r(shí)js代碼沒有執(zhí)行。

在網(wǎng)上搜到的有的不能用,有的兼容性很差,故自己想了解決方法,核心是利用setInterval的特性。

這樣比如下面這種情形:
本來只建了一個(gè)二維碼,新建了一個(gè)


E4294505-FFE4-473E-9316-5E32A64DB063.png

新建完用戶沒有點(diǎn)擊你寫的返回按鈕(圖中的完成按鈕),而是點(diǎn)擊了瀏覽器自帶的返回鍵

圖片中的chrome瀏覽器只是當(dāng)演示用,現(xiàn)實(shí)中請(qǐng)用非chrome的去感受這個(gè)問題
比如用firefox點(diǎn)擊打開圖片示例的網(wǎng)站鏈接

736A09E5-D8C0-45E9-90CC-27F4AE5378B5.png

結(jié)果回去頁面沒有刷新,結(jié)果顯示還是原來的樣子


736A09E5-D8C0-45E9-90CC-27F4AE5378B5.png

而如果返回刷新了,會(huì)這樣(用戶體驗(yàn)會(huì)不會(huì)好些?)


9F4837FE-BF66-437F-B2D7-67FE88229866.png

奉上代碼

要刷新的頁面(如頁面A)

<script>
    //chrome自帶后退刷新,故不再次刷新
       var ua = window.navigator.userAgent; 
       var isChrome = ua.indexOf("Chrome") && window.chrome;  
       if (! isChrome) {  
    //瀏覽器后退刷新
            function reload() {
                setInterval(function() {   //這個(gè)定時(shí)器返回A頁面會(huì)繼續(xù)執(zhí)行
                    if (localStorage.reload == 'true' ) {  //判斷是否刷新頁面
                        localStorage.setItem('reload','false');
                        location.reload()
                    }
                }, 500)
            };
        reload();
       }  

</script>

在A頁面之后訪問的頁面(如頁面B)添加一下一行代碼
ps:作為A頁面執(zhí)行刷新功能的開關(guān)

localStorage.setItem('reload','true');
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容