iOS新版底部⼯具栏遮挡问题完美解决
⼀、问题描述：
苹果设备（iOS）中打开H5页⾯，从⾸页跳转到其他页⾯后，页⾯的底部会出现⼀个带有前进和后退按钮⼯具栏，⽽该⼯具栏会遮挡住⾯底部的内容，影响页⾯的正常使⽤。
⼆、原因分析：
造成该现象的原因是，当页⾯跳转时，浏览器会通过window.history读取到浏览的历史记录，此时便会在页⾯底部显⽰出前进后退按钮的⼯具栏，造成页⾯底部内容遮挡。
三、解决⽅案：
了解了该问题出现的原因，我们也就有了解决办法。⾸先想到的⽅案就是控制浏览器的历史记录。由于考虑到安全性问题，浏览器的历史记录不⽀持删除和修改等操作，只能通过新增或替换的⽅式来实现对浏览历史的操作，因此可以有以下⽅案：
（⼀）⽅案⼀：将页⾯的路由跳转⽅式更换为 “replace” ⽅式，原⽣写法可以使⽤ place() 替代window.location.href ；vue中可以⽤this.$place() 替代 this.$router.push()。
本以为这样就可以解决该问题，但是经过测试发现该⽅案也会出现⼀些弊端：
⽆法使⽤后退功能，在其他机型（安卓机型）上后退会直接退出；
跳转到某些外部页⾯再后退回来，底部的⼯具栏还会出现。
为了解决第⼀个问题，想到了第⼆个⽅案——监听浏览器返回功能：
网站底部代码js特效
（⼆）⽅案⼆：通过history的state来监听浏览器的返回事件，通过js代码来模拟浏览器的页⾯后退操作，以此来解决⽆法后退的问题。但是该⽅案由于代码改动较⼤且页⾯间的跳转情况过于繁琐，暂时搁置。
考虑到操作history⽐较繁琐，转⽽考虑是否可以通过修改样式来实现兼容：
（三）⽅案三：使⽤媒体查询，⼿动设置两种页⾯样式，通过判断机型是否为iOS来展⽰不同的页⾯样式，将iOS端的底部按钮栏位置预留出来。但是由于⾸次进⼊页⾯时并⽆底部栏，且该⽅案需要判断的iOS机型和版本条件过多，样式的改动也较⼤，暂时搁置。
进⼀步分析该问题发⽣的原因，发现出现遮挡的主要原因是，底部的⼯具栏是在页⾯完成渲染之后才渲染的，因此才会出现覆盖原页⾯的问题，如果能让该⼯具栏优先于页⾯渲染，则页⾯的视⼝⾼度就
会是浏览器去掉底部⼯具栏之后的⾼度，这样就不会出现页⾯内容被遮挡的问题。想到了这⼀层⾯后我有如醍醐灌顶，终于到可以完美解决的办法了！
（四）最终⽅案：在页⾯加载之前通过主动添加空的历史记录，触发浏览器的history监听机制，让浏览器先于页⾯调出底部⼯具栏，从⽽解决遮挡问题。
所以我们需要在路由守卫中增加对 window.history 的处理，代码如下：
router.beforeEach((to, from, next) => {
placeState(null, null, window.localtion.href);
next();
})
由于项⽬使⽤的是vue，这⾥只展⽰vue中的写法，使⽤其他写法的同学可以类⽐⼀下。
这⾥之所以⽤replaceState ⽽不⽤ pushState ，是因为后者会在浏览器中多增加⼀条历史数据，这会导致在浏览器后退操作时需要后退两次才可以返回到之前的页⾯；⽽使⽤replaceState 则是替换浏览
历史中的上⼀条记录，⽤当前页⾯的地址替换上⼀条记录，本质上浏览历史是不变的，⾃此关于iOS端的底部⼯具栏遮挡问题就可以完美解决了。
到此这篇关于iOS新版底部⼯具栏遮挡问题完美解决的⽂章就介绍到这了，更多相关iOS 底部⼯具栏遮挡内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。