微信返回按钮ios和安卓兼容最终方案

最近碰见了一个微信控制返回按钮跳转到自己指定页面的问题。

目标1.：A页面（首页）--》B页面--》C页面，当页面跳转到C页面之后，点击返回想跳过B页面直接返回A页面，在A页面点击返回直接关闭（依靠微信本身）；

目标2：A页面（首页）--》B页面--》C页面--》D页面--》E页面，当跳转到E页面后，点击返回直接跳过中间的D,C,B直接返回A页面，在A页面点击返回直接关闭（依靠微信本身）；

最简单的办法百度了很久，采取了很多代码，最终个都发现不是很合适，总是有着各式各样的问题。如下：

1.采用popstate和 pushState的方法。因为pushState本身就是创建新的历史。这样只会让其他页面的返回也变得逻辑更加负载。甚至中间我还出现Ios甚至返回页面时不刷新页面但是会执行本页面的popstate和上一个页面的popstate。

2.采用 window.document.referrer会刷新上一页，但是同时也产生了新的历史记录,影响了其他页面的返回操作。

3.采用history.go(-1)会造成不刷新上一个页面。

经过上面的测试我慢慢的了解到了我具体的需求：

1.返回到的页面需要刷新

2.不产生新的历史记录

3.无节制的多层页面，而且一点返回还能回到最初自己期待的页面

经过自己翻看API去了解pushState和replaceState的本质作用后发现其实很简单。代码如下：

//替换当前链接的历史记录，此时不会跳转页面
history.replaceState({}, '', url);
//刷新当前页面，并且不留历史
location.reload();

解释：不断的采取replaceState替换当前页面的历史记录，然后再刷新当前，这样就不断的把当前的页面进行肆意的改动，跳转到最终页面后，点击一个返回按钮，一下子返回到了初始页面。这种方式应该是最简单的处理方式，比起我参考的那些既复杂又部分实现我需求的代码来说这应该是终极方案了。自己记录下，也让大家少走点弯路

微信返回按钮ios和安卓兼容最终方案相关推荐

IOS 微信返回按钮事件控制弹层关闭还是返回上一页
在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回"<"按钮,就会跳转回上一页或退出网站,而 ...
html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
vue解决h5 video视频 ios和安卓兼容问题
解决问题:不全屏播放播放一次就不能播放,IOS一开始是白屏,返回后不能播放核心是判断手机为安卓还是ios,然后分开写下面是几个核心的关键代码: controls 解决播放一次就不能播放 webk ...
ios和安卓兼容问题（font-weight，new Date）
背景:最近做移动端网页发现的手机兼容问题,做下记录: 1.字体加粗:font-weight 问题: 安卓对700以下的值不生效,显示的是默认的效果: 方法: 设置成700或以上,也可以写成 font- ...
微信小程序 ios和安卓问题
ios不能识别 2020-12-21 只能识别2020/12/21 ios获取用户手机号点击拒绝返回的是getPhoneNumber:fail user deny" 安卓获取用户手机号点击 ...
解决ios与安卓兼容问题 --- css
1:ios端input.button样式不生效 .input{-webkit-appearance: none;/*解决ios样式问题*/ } 2:ios端禁用屏幕缩放 <meta conten ...
微信公众号监听返回按钮关闭当前界面，部分安卓机监听popstate失败【小程序与公众号】
需求: 微信公众号开发的时候,可能会出现这种需求: 微信公众号内指定某个网页在点击返回键时不回退到上一级,而是直接关闭微信浏览器窗口,用户点击返回按钮本身就是一个返回事件. 解决方案: 利用监听返回事 ...
解决IOS微信浏览器底部会出现向前向后返回按钮，返回不刷新的问题
解决IOS微信浏览器底部会出现向前向后返回按钮,返回不刷新的问题参考文章: (1)解决IOS微信浏览器底部会出现向前向后返回按钮,返回不刷新的问题 (2)https://www.cnblogs.co ...
解决IOS微信浏览器底部会出现向前向后返回按钮问题
解决办法1:跳转页面使用 this.$router.replace() ,这样微信浏览器就不会存有历史记录,有效隐藏底部出现后退栏的白条先说说为什么这样做可以解决这个办法: 1.this.$rout ...

微信返回按钮ios和安卓兼容最终方案

微信返回按钮ios和安卓兼容最终方案相关推荐

最新文章

热门文章