Android仿UC浏览器切换网页背景色

平时会喜欢看下Android开发技术周报里边的文章学习下，这个网页做的不错，每周更新不少干货上去，很值得一看。因为每次都需要用浏览器去看，对我个人喜欢坐车看书的人来说，体验不算好。于是，自己鼓捣了个app，主要就是将这个网站的资源整合，然后重新排版了。已经上了豌豆荚，欢迎大家点击下载下载地址

考虑到有些人喜欢熄灯后躺在床上继续学习（额，其实这个习惯不好。。。），所以在app中增加了一个夜间模式。由于文章都是通过webview加载的，所以这就需要对webview加载的网页切换背景色。这篇文章就记录网页切换背景色的实现方法

步骤

1 正常调用webView.loadUrl(url);
2 监听网页加载进度

webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                if (progress == 100) {
                    rlvWeb.refreshComplete();
                    if (isNightMode) {
                        String refreshUrl = "javascript:(function(){if(!document.getElementById('eyeshield_color_css')){var head = document.getElementsByTagName('HEAD').item(0);var style = document.createElement('style');style.id = 'eyeshield_color_css';style.type = 'text/css';style.innerText = \"*{background-color:#f0e68c !important;}\";head.appendChild(style);};})();";
                        webView.loadUrl("javascript:" + refreshUrl);
                    }
                }
            }

        });

3 当加载完成时，调用本地写的JS代码，webView.loadUrl(“javascript:” + refreshUrl);

JS代码分析

function(){
        // 判断当前是否含有eyeshield_color_css为id的节点
    if(!document.getElementById('eyeshield_color_css')){
        // 找到head元素，往head增加一个style的子节点
        var head = document.getElementsByTagName('HEAD').item(0);
        var style = document.createElement('style');
        // 将增加的style子节点的id设置为eyeshield_color_css，设置该id主要是为了方便查找，用于更换背景色或者去除背景色
        style.id = 'eyeshield_color_css';
        style.type = 'text/css';
        // 这段代码主要是让网页强制的使用background-color设置的颜色作为背景色
        style.innerText = "*{background-color:#f0e68c !important;}";
        head.appendChild(style);
    };
}();

更多

UC浏览器里边提供了几种网页背景色让用户选择，其实，这里提供的方法也是可以实现的。就是通过记录用户的选择，动态改变style.innerText = "*{background-color:#f0e68c !important;}";里边background-color的颜色值就可以了。