微信H5:IOS下的微信H5页面的底部前进后退横栏如何隐藏或者解决?

在5月末的时候,微信更新了一个新的版本后,微信的页面浏览已经是不一样的感觉了。但是,在IOS中,微信H5页面浏览时,页面底部会出现一个前进后退的横栏,将整个页面都挤压了,能展示的东西就更少了。
如图所示:图片描述

这个底部横栏怎么去掉或者隐藏掉?

因为有看到别人的H5页面有隐藏或者解决掉,所以,个人认为应该还是有办法的,只是自己不知道而已,特来求助~

阅读 28.4k
评论 2018-06-04 提问
    13 个回答
    Sprite
    • 213

    目前没有什么合理的方式解决,因为这个底部栏实际上是一个浏览器历史记录跳转栏,而且这并不是H5 是微信的IOS组件。
    1楼提供的地址并不能解决问题,demo也是无效的。
    除非微信提供jssdk 的api 来和原生进行通讯。

    另外还有一个思路,那就是把当前的h5应用完全做成 单页面应用,所有的动作都封装到JS里面,所有的页面跳转都是ajax内容更新就可以避免掉下方的导航条。

    ----- 20180816 updated
    大家对于我所说的单页还不是很理解的样子,我补充一下demo给大家

    clipboard.png

    https://donsee.cn/demo/noTool...
    源码直接看html
    具体的JS逻辑需要大家自己去完善,当然做成单页应用需要考虑性能问题,dom操作的需要注意清理无效dom

    评论 赞赏
      评论 赞赏
        古月石石石
        • 2
        • 新人请关照

        刚才发现了解决办法,一切链接跳转使用window.location.replace('url');这样微信浏览器就不会存有历史记录,有效隐藏底部出现后退栏的白条

        评论 赞赏

          你好,问下你这个问题解决了嘛?我现在也遇到这个问题了,麻烦告知下呗,万分感谢兄弟

          评论 赞赏
            评论 赞赏

              假如是长页的话用这段代码,可以在用户滑动页面时自动隐藏底部栏。

              CSS

              .page {
                  position: absolute;
                  left:0;
                  top:0;
                  width: 100vw;
                  height:100vh;
              }

              HTML

              <div class="page">
               <!-- 长页内容 -->
              </div>
              评论 赞赏

                可能楼上的答案能帮助到大家,但是,这个不是我所想要的,所以,我还是会继续去寻找更优的解决办法的~

                评论 赞赏

                  我就问一个最蠢的问题,请问这个高度是固定的吗!!!!我对着这个高度css做一下调整还不行吗!!!???

                  评论 赞赏

                    在vue中使用replace进行的页面跳转时,不会出现下面的导航条,其他的应该也是这样。可以考虑将路由信息记录到sessionStorage中,所有跳转都通过replace,不过在页面后退处理时可能会麻烦,个人的一点建议,希望可以看到更好的方法。

                    评论 赞赏
                      hunger1012
                      • 4
                      • 新人请关照
                      document.body.onclick = function(e) {
                        if(e.target.tagName.toLowerCase() === 'a') {
                          e.preventDefault()
                          window.location.replace(e.target.getAttribute('href'))
                        }
                      }

                      复制下面的链接,在微信浏览器预览

                      http://js.jirengu.com/cusan

                      评论 赞赏
                        dont
                        • 2
                        • 新人请关照

                        有人知道解决方案了吗!

                        评论 赞赏
                          白砂糖的白
                          • 1
                          • 新人请关照

                          我最近也遇到了这个问题,琢磨出了一个比较完美的解决方案,具体操作可以参考我在简书上的文章:https://www.jianshu.com/p/0a9...

                          评论 赞赏
                            dy3485
                            • 0
                            • 新人请关照

                            微信有回应了,告诉一下。谢谢

                            评论 赞赏
                              撰写回答

                              登录后参与交流、获取后续更新提醒