微信底部白条解决办法 受权白条

 

近期微信更新后，访问H5会出在底部出现白色控制条

其缘由是当前浏览器下产生了>1的 history。因而微信就出现了 前进后退的控制“白条”，对于咱们本身开发的H5，若是出现页面跳转，使用 location.replace("url")  能够避免。

可是目前常见的产生状况，不在咱们控制的范围以内的有：

A：阅读原文→H5 (20190504 微信最新版，已取消阅读原文跳转后出现白条) ，这个目前暂时没有办法解决 （文章内 长按识别二维码不会出现）

B：受权

 

通过研究，B能够实现不出现白条（包括首次受权，非cookies记录，二次访问）,可是对受权逻辑有要求

在受权以前不访问到HTML页面，就不会产生白条。

 

那么最终的优化方案：

TIPS: 须要依赖微信自定义分享。

 

到此问题解决。DEMO地址    

 

 

Tips:

此demo作法会有1个容易出现的误操做的状况。我在受权后将受权信息跟在url 上。
若是用户A复制连接给到B，那么B也会看到A的信息。

因此建议，将信息写到cookies 或者localStorage。这样若是A 用户复制连接给B, B至少能去受权（虽然这样会出现白条）。因此咱们尽量的控制用户访问到咱们的server 受权地址，避免出现白条