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

时间:2022-12-30 20:31:39

一、需求
微信企业号在苹果ios返回时页面是不刷新的,而公司业务要求刷新。
1、点击“我的工单”,进入我的工单页面后,再返回时,这个首页的页面要刷新,这样“我的工单”右上角的消息就能及时更新。
微信企业号 苹果ios 返回页面不刷新 h5
2、图片左上角的“#time:94”等是调试信息。用的是setInterval(),如果页面刷新,则从1开始计数,如果没有刷新,则还是原来的数字。
二、代码实现
1、页面结构
(1)首页:main.html
(2)我的工单:myJobOrder.html
(3)在途工单:onOrder.html
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);
}

三、走的弯路:
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如果删除的话,则页面不会刷新。