微信底部白條解決辦法 受權白條

 

近期微信更新後，訪問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 受權地址，避免出現白條