解决非chrome浏览器(移动端适用)后退刷新问题

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');
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容