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", "#"); 

									 } 

									}