问题现象
打开Bilibili视频播放页,如https://m.bilibili.com/video/av23921215.html,正常打开该页面,但过一二秒后页面白屏。
根本原因
Bilibili视频放页的JS脚本会尝试跳转到一个地址,关键代码如下
该href的一个实例如下:
bilibili://video/23921215?h5awaken=cHZpZD0zOTY3NzhCMC03QjI4LTRDRjctOEQyNC1BNThBMDgwQ0Y1QUQxMDE1NzNpbmZvY18yMzkyMTIxNV8xNTI4ODU5NDE2NTAwJnVhPU1vemlsbGElMkY1LjAlMjAoTGludXglM0IlMjBVJTNCJTIwQW5kcm9pZCUyMDYuMC4xJTNCJTIwemhfQ04lM0IlMjBOZXh1cyUyMDUlM0IlMjBCdWlsZCUyRk00QjMwWiklMjBjbi5uaW5lZ2FtZS5nYW1lbWFuYWdlciUyRjExNDAlM0IlMjBOaW5lR2FtZUNsaWVudCUyRmFuZHJvaWQlMjB2ZSUyRjUuMS4yLjI1MSUyMHNpJTJGMWIxYmE3YzUtM2EwOS00MzdhLTllOWUtNmJjYmUzOGYxM2YzJTIwY2glMkZLRF8xJTIwc3MlMkYxMDgweDE3NzYlMjBuZyUyRmViNmU0NWE4YTY2N2E0MTczY2RiZjhlZGVhZDBlNjhmZGYlMjB1dCUyRldjaHBiS2JrbkZrREFLWlBLNGJwbVpTOCUyMG50JTJGd2lmaSUyMFVDQnJvd3NlciUyMFVDQlMlMkYyLjEzLjEuMTUmaXNBdXRvT3Blbj10cnVlJmJzb3VyY2U9dWNfYnJvd3Nlcl9hcHA%3D
其实该uri是bilibili APP的所支持的scheme之一,通过反编译其apk后,查看其AndroidManifest.xml,可以找到对应的Intent-filter定义,如下所示
如果没有对该uri作任何的拦截处理,WebView会默认加载该链接,出现找不到页面(白屏)。
解决方案
在WebViewClient的实现的shouldOverrideUrlLoading中支持bilibili://video/ uri的拦截,发起相应的intent,拉起Bilibili APP
TIPS分享
- 查找这类问题可以直接用Chrome的Web Inspector功能,另外借助能更改UA的插件。更改UA的插件能更正实的模拟自己的WebView组件,尽可能的在Chrome上重现问题。 我目前使用的是 User-Agent Switcher for Chrome
- Chrome的Web Inspector的网页(网站)代码的全局搜索功能是 (mac上是cmd + alt + F),方便搜索与定位“问题”代码
- 排查Android WebView相关的排版问题,善用WebViewClient的shouldOverrideUrlLoading的回调(shouldOverrideUrlLoading在网页加载任何子页面,页面跳转都会回调),同时对页面的加载逻辑做拦截也是它的实现中。