iPhoneX
一、问题描述：
苹果设备（iOS）微信中打开H5页面，从首页跳转到其他页面后，页面的底部会出现一个带有前进和后退按钮工具栏，而该工具栏会遮挡住面底部的内容，影响页面的正常使用。
二、原因分析：
造成该现象的原因是，当页面跳转时，微信浏览器会通过window.history读取到浏览的历史记录，此时便会在页面底部显示出前进后退按钮的工具栏，造成页面底部内容遮挡。
三、解决方案：
了解了该问题出现的原因，我们也就有了解决办法。首先想到的方案就是控制浏览器的历史记录。由于考虑到安全性问题，浏览器的历史记录不支持删除和修改等操作，只能通过新增或替换的方式来实现对浏览历史的操作，因此可以有以下方案：
（一）方案一：将页面的路由跳转方式更换为 “replace” 方式，原生写法可以使用
window.location.replace()替代window.location.href；vue中可以用this.$router.replace()替代this.$router.push()。
本以为这样就可以解决该问题，但是经过测试发现该方案也会出现一些弊端：
- 无法使用后退功能，在其他机型（安卓机型）上后退会直接退出；
- 跳转到某些外部页面再后退回来，底部的工具栏还会出现。
为了解决第一个问题，想到了第二个方案——监听浏览器返回功能：
（二）方案二：通过history的state来监听浏览器的返回事件，通过js代码来模拟浏览器的页面后退操作，以此来解决无法后退的问题。但是该方案由于代码改动较大且页面间的跳转情况过于繁琐，暂时搁置。
考虑到操作history比较繁琐，转而考虑是否可以通过修改样式来实现兼容：
（三）方案三：使用媒体查询，手动设置两种页面样式，通过判断机型是否为iOS来展示不同的页面样式，将iOS端的底部按钮栏位置预留出来。 但是由于首次进入页面时并无底部栏，且该方案需要判断的iOS机型和版本条件过多，样式的改动也较大，暂时搁置。
进一步分析该问题发生的原因，发现出现遮挡的主要原因是，底部的工具栏是在页面完成渲染之后才渲染的，因此才会出现覆盖原页面的问题，如果能让该工具栏优先于页面渲染，则页面的视口高度就会是浏览器去掉底部工具栏之后的高度，这样就不会出现页面内容被遮挡的问题。想到了这一层面后我有如醍醐灌顶，终于找到可以完美解决的办法了！
（四）最终方案：在页面加载之前通过主动添加空的历史记录，触发浏览器的history监听机制，让浏览器先于页面调出底部工具栏，从而解决遮挡问题。
所以我们需要在路由守卫中增加对 window.history 的处理，代码如下：
router.beforeEach((to, from, next) => {
window.history.replaceState(null, null, window.localtion.href);
next();
})
由于项目使用的是vue，这里只展示vue中的写法，使用其他写法的同学可以类比一下。
这里之所以用replaceState 而不用 pushState ，是因为后者会在浏览器中多增加一条历史数据，这会导致在浏览器后退操作时需要后退两次才可以返回到之前的页面；而使用replaceState 则是替换浏览历史中的上一条记录，用当前页面的地址替换上一条记录，本质上浏览历史是不变的，自此关于iOS端微信的底部工具栏遮挡问题就可以完美解决了。
以上是我在H5项目中遇到的坑以及自己的解决方法，希望可以帮到大家 ^ - ^
网友评论