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

这篇文章主要为大家展示了“如何解决iOS新版微信底部返回横条的问题”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何解决iOS新版微信底部返回横条的问题”这篇文章吧。

成都创新互联公司服务项目包括高安网站建设、高安网站制作、高安网页制作以及高安网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，高安网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到高安省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

之前没有怎么接触过微信开发，只是对H5比较熟。最近维护一个微信公众号的项目，遇到了iOS端返回键的坑。

描述一下：

从公众号打开页面后，底部有个返回的小横条，恰好也挡住了页面。这不行啊，得解决。

页面的高度是调用 $(window).height();来获取的，但道理来讲应该没什么问题。
第一个反应是，要不判断一下设备，如果是iOS则给添加一个高度？
这个想法还没实行呢，就发现了一个现象。第一次进来的时候是挡着的，但是刷新一下就不挡了。然后就想着要不判断第一次进来给个刷新？

然后落实了，改代码。的确没有问题，进来之后会判断是否第一次，如果是第一次则刷新页面。刷新之后页面高度显示正常。

但是在页面加载后刷新，会有很明显的跳转，也耗资源。不是最好的解决方式。然后继续整改。

最后还是得从源头出发，找到为什么会有底部的小横条。

一般的，如果是第一个界面，是没有底部横条的。当页面发生跳转后，会有底部小横条。

然后我就在页面中找跳转，最后发现，有几行代码是给当前添加历史记录的！

代码如下：

function(){ 
 pushHistory();
 window.addEventListener("popstate", function(e) {
 WeixinJSBridge.invoke('closeWindow',{},function(res){ });
 }, false); 
 
 function pushHistory() { 
 var state = { 
  title: "title", 
  url: "#" 
 }; 
 window.history.pushState(state, "title", "#"); 
 } 
}

分析一下代码，这里其实就是 添加一个历史记录，有了历史记录，微信的小横条就会出来，Android的返回键就可以监听到。然后这里修改了返回事件，当点击返回时触发关闭当前页面。

我觉得这个代码应该是微信公众号开发里面比较常用的一种方式。在以前的话，也没什么问题，可以返回关闭页面，比较方便。但是升级之后，微信多出来底部的返回条，而页面高度是在之前取的值，那么页面的高度就是未加横条的高度，横条出现后自然会遮挡住页面内容。

解决方式也很简单，把这段代码 提前，提前到获取高度之前，这样的话先有了横条，再有高度，则高度刚刚好是中间部分，这样就不会有遮挡问题

以上是“如何解决iOS新版微信底部返回横条的问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页题目：如何解决iOS新版微信底部返回横条的问题
链接地址：https://www.cdcxhl.com/article8/pgooip.html

成都网站建设公司_创新互联，为您提供建站公司、域名注册、关键词优化、网站营销、网站设计、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联