问题
微信更新后，新加的文章缩小浮窗功能很赞。
不过，有一处更新让我吐槽了半天，就是在iPhone上WebApp页面底部多了一个白色的前进后退控制栏，即下图底部的返回栏
日了狗了的扯蛋底部返回栏.jpg
问题所在
通过搜索发现底部返回栏的机制是
- 页面出现跳转时出现
- 页面向下滚动时隐藏
出现状态如下图
出现底部返回栏.gif
解决办法
针对上面的机制，对应两种办法去隐藏底部返回栏
- 已知是跳转出现，那我们就对跳转进行拦截,让所有的跳转使用 replace()
- 使用原生JS
location.replace(URL)
- 如果你使用vue-router
let toURL = null
router.beforeEach((to, from, next) => {
if (toURL === to.path) {
next()
}
if (to.path !== from.path) {
toURL = to.path
router.replace(to.path)
next()
}
})
成功隐藏底部返回栏.gif
- 使页面可以向下滚动
注意replace()带来的问题
当你使用replace()时,浏览器没有历史记录
- 如果你不需要,那么恭喜你不用继续看下去了
- 如果你很不幸,你需要历史记录,那么也存在两种场景
- 微信浏览时不需要
- 判断是否微信浏览,如果是就进行replace()
let isWeiXin= window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'
- 判断是否微信浏览,如果是就进行replace()
- 微信浏览时需要
- 自己实现一个历史记录数组,每次replace()时存入记录
- 微信浏览时不需要
