一、背景
背景是这样的：该项目进入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(使用前将#替换为@)
