微信企业号苹果ios 返回页面不刷新 h5

╰+哭是因爲堅強的太久メ 2022-06-14 08:16 256阅读 0赞

一、需求  
微信企业号在苹果ios返回时页面是不刷新的，而公司业务要求刷新。  
1、点击“我的工单”，进入我的工单页面后，再返回时，这个首页的页面要刷新，这样“我的工单”右上角的消息就能及时更新。  
![这里写图片描述][SouthEast]  
2、图片左上角的“\#time:94”等是调试信息。用的是setInterval()，如果页面刷新，则从1开始计数，如果没有刷新，则还是原来的数字。  
二、代码实现（方法一）  
2.1、页面结构  
（1）首页：main.html  
（2）我的工单：myJobOrder.html  
（3）在途工单：onOrder.html  
2.2、贴代码  
首页main.js中加入以下代码：

2.3、走的弯路：  
1、popstate中的函数为

window.history.back();

（1）现象：苹果手机中，从“我的工单”返回时，首页并不会刷新。  
2、popstate中的函数为：

window.history.go(-1);

（1）现象：苹果手机中，从“我的工单”返回时，会直接跳转到登录页。  
3、“我的工单”，popstate中的函数为：

self.location=document.referrer

（1）现象：苹果手机中，从“我的工单”返回时，“首页”会刷新，“首页”点返回，回到“我的工单”，再点“我的工单”回到“首页”，“首页”不刷新。  
给“首页”也添加这个函数时，能解决这个问题。  
然后在“我的工单”中也添加这个函数，从“我的工单”返回时，“首页”刷新，再单击进入“在途工单”，点击返回时会回到“我的工单”，不会回到“首页”。  
4、本来想让“首页”点击返回时能回到登陆。  
于是（1）在首页设置

location.href=referUrl; //referUrl是登录页的url

（2）“我的工单”设置：

location.href=referUrl; //referUrl是首页的url

（3）测试结果：在goole浏览器中，点击“我的工单”会回到首页，在微信中点击“我的工单”会回到“登陆页”  
（4）发现popstate,函数中，“我的工单”跳转到“首页”，如果首页的popstate中有

location.href=referUrl; //referUrl是想要跳转的url

则点击“我的工单”的返回，会直接跳转到“首页”的popstate函数中想要跳转的url  
5、通过4发现，“我的工单”的返回会触发“首页”的popstate函数，所以，最后通过设置“首页”的popstate函数，将其设置为自身的url，可以让首页刷新。  
6、pushstate如果删除的话，则页面不会刷新。  
2.4 注意：这种方法只适用于首页。  
如果微信公众号有a,b,c三个页面，c页面返回到b页面，b页面能刷新，但是再点返回还是回到了c页面，没有回到a页面。因为它相当于在页面c重定向了一个url为b，返回时返回的是c。  
我是直接控制首页点击返回不能回到其他任何地方。  
三、代码实现（方法二）  
1、

window.addEventListener("pageshow", myFunction);
        function myFunction() {
          console.log('返回的值：'+sessionStorage.myOrderGoBack);
          if(sessionStorage.myOrderGoBack==1){
    //        console.log('测试：刷新');
            location.reload();
            sessionStorage.setItem('myOrderGoBack',2);
          }
        }

（1）监听pageshow事件，sessionStorage.myOrderGoBack的值如果是1，就刷新，刷新完后变为2。但是每次点击了首页，都要将值设为1，这样返回来之后就能刷新了。（2）这样的刷新是在页面显示之后再刷，第一次页面只是显示，没有刷新，第2次是刷新。这样看起来就是页面刷了2次，也不是特别完美的方法。

[SouthEast]: /images/20220614/c18ade4a240440cdae23980e7d251cac.png