iOS新版微信底部工具栏遮挡问题完美解决

一、问题描述：

苹果设备（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端微信的底部工具栏遮挡问题就可以完美解决了。

到此这篇关于iOS新版微信底部工具栏遮挡问题完美解决的文章就介绍到这了,更多相关iOS 微信底部工具栏遮挡内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • iOS新版微信底部返回横条问题的解决

    之前没有怎么接触过微信开发,只是对H5比较熟.最近维护一个微信公众号的项目,遇到了iOS端返回键的坑. 描述一下: 从公众号打开页面后,底部有个返回的小横条,恰好也挡住了页面.这不行啊,得解决. 页面的高度是调用 $(window).height();来获取的,但道理来讲应该没什么问题. 第一个反应是,要不判断一下设备,如果是iOS则给添加一个高度? 这个想法还没实行呢,就发现了一个现象.第一次进来的时候是挡着的,但是刷新一下就不挡了.然后就想着要不判断第一次进来给个刷新? 然后落实了,改代码.

  • iOS新版微信底部工具栏遮挡问题完美解决

    一.问题描述: 苹果设备(iOS)微信中打开H5页面,从首页跳转到其他页面后,页面的底部会出现一个带有前进和后退按钮工具栏,而该工具栏会遮挡住面底部的内容,影响页面的正常使用. 二.原因分析: 造成该现象的原因是,当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡. 三.解决方案: 了解了该问题出现的原因,我们也就有了解决办法.首先想到的方案就是控制浏览器的历史记录.由于考虑到安全性问题,浏览器的历史

  • jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅. 问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡. 解决过程: 首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添

  • ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

    在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

  • ios微信浏览器返回不刷新问题完美解决方法

    开始用的表单提交,返回参数就丢失,换成url跳转,popstate监听 (注释部分)ios10测试始终有问题,继续搜,最后用pageshow,pagehide完美解决(另外说一句:珍爱生命,远离微信和ios) var wxback = { init :function(){ //隐藏微信分享按钮等 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hid

  • android 中viewpager+fragment仿微信底部TAG完美渐变

    android 中viewpager+fragment仿微信底部TAG完美渐变

    viewpager+fragment仿微信底部TAG完美渐变,在图片渐变的同时字的颜色也在变,注意,是渐变哦! 效果图: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.Sing.weixin" xmlns:tools="

  • 微信小程序底部tabBar遮挡内容的简单处理方法

    微信小程序底部tabBar遮挡内容的简单处理方法

    微信小程序配置tabBar之后会遮挡重要内容,而且不同机型如iPhoneX下面可能有一块空白如下图,比较坑的是页面最底部空白也会显示页面,因此需要获取被遮挡的高度 可以看出iPhoneX下面会多出一块空白也会增加tabBar的遮挡内容,可以通过wx.getSystemInfoSync()获取机型的各种信息. 其中screenHeight是屏幕高度,safeArea的bottom属性会自动计算安全区域也就是去除tabBar下面的空白区域后有用区域的纵坐标. 如此就可以简单计算出tabBar的高度:

  • iOS仿微信相机拍照、视频录制功能

    网上有很多自定义相机的例子,这里只是我临时写的一个iOS自定义相机(仿微信)拍照.视频录制demo,仅供参考: 用到了下面几个库: #import <AVFoundation/AVFoundation.h> #import <AssetsLibrary/AssetsLibrary.h> 在使用的时候需要在Info.plist中把相关权限写进去: Privacy - Microphone Usage Description Privacy - Photo Library Usage

  • ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

    最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口.刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,具体表现为,当嵌套的子页面的高度大于父页面的高度,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面高度,就会出现弹框找不到的情况,其实可能是在视口以下,弹框的位置只是相对于子页面来定位,并没有相对于视口定位. 尝试了好多种方法,均不理想,而安卓系统则表现良好,于是想到,iO

  • 完美解决手机网页中输入框被输入法遮挡的问题

    之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 css部分 (dlg-top与dlg-bottom为对话框的类,用于确定对话框的定位方式) .dlg-top{ position: fixed; top:100px; left:10%; } .dlg-bottom{ position: fixed; bottom:0px; left:10%; }

随机推荐