关于 苹果手机 微信浏览器里点击返回不加载方法的问题

前几天,新增一需求,发现在苹果微信浏览器里会有一个bug。  就是用户苹果点击返回时,不加载 onload 的方法,导致使用缓存的数据,而缓存的数据中有个数据字段不会变,所以bug出现。

<body class="my_body" onload="loaded()" id="body">

我找了一些方法解决了问题。 在此记录下。

方案一:通过onload方式

页面中写一个隐藏的input

js操作如下

 οnlοad=function(){

        var refreshedId=document.getElementById("refreshed");

        if(refreshedId.value=="no"){

            refreshedId.value="yes";

           } else{

             refreshedId.value="no";

             location.reload();

         }

 }

方案通过onpageshow 方式

苹果safari中返回不执行方案一的onload事件,要用如下方式:

window.onpageshow = function(event) {

    if (event.persisted) {

        window.location.reload()

}};

PSevent.persisted在电脑中一直是返回false,但是在手机safari中是没有问题的。

方案综合解决方案

因此,可以如下写代码:

  if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {

        window.onpageshow = function(event) {

            if (event.persisted) {

                window.location.reload()

            }

        };

    }else{

        οnlοad=function(){

            var refreshedId=document.getElementById("refreshed");

            if(refreshedId.value=="no"){

                refreshedId.value="yes";

               } else{

                 refreshedId.value="no";

                 location.reload();

             }

        }

    }

通过上面代码发现在safari中第一次打开页面的时候,有时候会出现闪屏效果。

添加如下代码:

$(window).bind("unload", function() { });

方案四:通过iframe方式阻止缓存(不推荐,所以不写出来了)

方案五、通过时间戳强制刷新方式(不推荐,所以不写出来了)




  


你可能感兴趣的:(前端技术,Javascript)