//時間 20190923
//近期微信更新后, 閱讀原文link到H5 不會在產生底部前進后退的白條了 :)
近期微信更新后,訪問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 授權地址,避免出現白條