一、背景
背景是这样的:该项目进入h5时会通过 location.replace(xxx) 或 location.href = xxx 跳转到某个地址①,该地址会请求获得微信 openId;获取成功后再重定向到h5首页。
那么问题来了,重定向会在微信浏览器留下一条 history 记录,那么我在h5首页按手机的物理返回键,就不会因为已是第一页而退出浏览器,而是跳回地址①,再重定向到首页;按返回键又回到①,又重定向到首页。。。除非手速够快,不然就会形成“死循环”。
那么,怎样能在首页按返回键时,直接关闭微信浏览器呢?
二、解决思路
解决思路很自然:
1、在首页监听手机何时被按下返回键;
2、当发生1中事件时,截停浏览器默认事件(不返回history中的重定向页);
3、然后执行自定义事件(关闭微信浏览器)。
三、解决方法
1、在首页监听手机何时被按下返回键
监听 popstate 事件。其实并没有严格意义上的“按下物理返回键”事件,但手机的物理返回键其实作用就跟浏览器左上角的 “←” 按钮作用相似,都是返回上一个页面(也就是history中的上一条记录)。而浏览器中返回上一条 history 记录时触发了 “popstate” 事件。因此我们可以利用 “popstate” 来模拟 “按下物理返回键” 事件。
代码:
// 本示例使用了 vue3 + typescript。其他框架类似,在组件创建、挂载时加上这个事件监听;
function closeWXWindow() {
// TODO: 关闭微信浏览器
}
onMounted(() => {
window.addEventListener('popstate', closeWXWindow);
});
// 记得离开该页面时取消监听,否则在其他页面按返回键也会直接关闭浏览器了~
onUnmounted(() => {
window.removeEventListener('popstate', closeWXWindow);
});
2、当发生1中事件时,截停浏览器默认事件(不返回history中的重定向页)
这个稍微有点小复杂~
大家乍一看可能脱口而出:“这个我熟!在事件处理函数里加一行 event.preventDefault() 嘛!”
遗憾的是,即使用上这么一行,浏览器还是会回到上一级页面。其实可以这么理解:正是因为返回了上一级页面,所以才会有 "popstate" 事件;而不是有了 “popstate” 事件,然后才去执行返回上一级页面的默认行为。
所以说,按下返回键后,“返回上一级页面” 这个动作,浏览器无论如何都会执行!
直接截停是没戏了,但咱们可以模拟呀——只要上一级页面跟当前页面是同一个页面,那返回去跟没返回去不就一样了么!
因此,我们只需要在进入首页(假设地址是 localhost:8080/home)时,往 history 里再加入一条首页记录,不就好了嘛!
代码:
function closeWXWindow() {
// TODO: 关闭微信浏览器
}
onMounted(() => {
/** 新增内容 begin
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)