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

一、需求
微信企业号在苹果ios返回时页面是不刷新的,而公司业务要求刷新。
1、点击“我的工单”,进入我的工单页面后,再返回时,这个首页的页面要刷新,这样“我的工单”右上角的消息就能及时更新。
在这里插入图片描述

2、图片左上角的“#time:94”等是调试信息。用的是setInterval(),如果页面刷新,则从1开始计数,如果没有刷新,则还是原来的数字。
二、代码实现(方法一)
2.1、页面结构
(1)首页:main.html
(2)我的工单:myJobOrder.html
(3)在途工单:onOrder.html
2.2、贴代码
首页main.js中加入以下代码:

var referUrl='/yunweiyun_mobile/app/main.htm?allflag=1&userId='+userId;
pushHistory(referUrl);//微信苹果返回刷新
/*点击微信返回时,会刷新*/
function pushHistory(referUrl){ window.addEventListener("popstate",function(e){
  location.href=referUrl;
 }, false);
 var state = {
   title:''
 };
 var title='';
 var url='';
 window.history.pushState(state,title,url);
}

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次,也不是特别完美的方法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值