关闭

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

600人阅读 评论(0) 收藏 举报
分类:

平时会喜欢看下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的颜色值就可以了。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:47473次
    • 积分:593
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:0篇
    • 译文:1篇
    • 评论:13条
    最新评论