通过WebView向html页面注入js代码,实现WebView切换白昼模式/夜间模式

入职的第一天,项目遇到一些技术难题,负责人就说,你懂一些h5,你看看怎么解决webview白昼/夜间模式。然后查了一些资料,找了一些思路;总结下来;


场景:新闻类APP,通过WebView加载html页面,实现白昼/夜间模式。

思路:

方式一:如果html页面是自己写的,那么直接在h5中加入js代码(改变背景和字体颜色),然后用原生android调用js。即native和js互调;这个比较简单,实现代码网上一大堆;但是有个局限,用第三方的新闻类h5页面,没办法这么干;


方式二:通过WebView向html页面注入js代码;核心就在如何向h5页面注入js代码;这种方式既能满足自己的h5页面也能满足第三方的;

原理就是这样,我也废话,太浪费时间。直接上Demo,注释很全;
需要注意:Demo中
通过WebView向html页面注入js代码,实现WebView切换白昼模式/夜间模式_第1张图片
1.为自己写的一个html页面,2中的hello.png,是html页面加载的图片;html文件不需要生产R文件,所以应当放在assets目录下;

apk目录下有Demo的apk。


Demo下载地址:

https://github.com/KernHu/Js2Theme

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

效果如视频:  哎,传不了视频。

通过WebView向html页面注入js代码,实现WebView切换白昼模式/夜间模式_第2张图片

通过WebView向html页面注入js代码,实现WebView切换白昼模式/夜间模式_第3张图片



你可能感兴趣的:(Android,板块,webview,javascript,native)