tips
:接下去會在github寫博客,簡書不再更新和修改文章,歡迎大家逛逛我的新博客點擊查看 ,我會盡量用更容易理解的方式寫好每一篇博客,大家一起學習交流??。
寫頁面時你可能會遇到這個問題,就是用Firefox,Safari,IE等非chrome瀏覽器,點擊瀏覽器自帶的返回鍵會發現不會刷新頁面,因為那時js代碼沒有執行。
在網上搜到的有的不能用,有的兼容性很差,故自己想了解決方法,核心是利用setInterval的特性。
這樣比如下面這種情形:
本來只建了一個二維碼,新建了一個
E4294505-FFE4-473E-9316-5E32A64DB063.png
新建完用戶沒有點擊你寫的返回按鈕(圖中的完成按鈕),而是點擊了瀏覽器自帶的返回鍵
圖片中的chrome瀏覽器只是當演示用,現實中請用非chrome的去感受這個問題
比如用firefox點擊打開圖片示例的網站鏈接
736A09E5-D8C0-45E9-90CC-27F4AE5378B5.png
結果回去頁面沒有刷新,結果顯示還是原來的樣子
736A09E5-D8C0-45E9-90CC-27F4AE5378B5.png
而如果返回刷新了,會這樣(用戶體驗會不會好些?)
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() { //這個定時器返回A頁面會繼續執行
if (localStorage.reload == 'true' ) { //判斷是否刷新頁面
localStorage.setItem('reload','false');
location.reload()
}
}, 500)
};
reload();
}
</script>
在A頁面之后訪問的頁面(如頁面B)添加一下一行代碼
ps:作為A頁面執行刷新功能的開關
localStorage.setItem('reload','true');