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

原创 2016年08月31日 14:14:17

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

仿UC浏览区首页页面切换效果

  • 2015年08月27日 17:31
  • 7.11MB
  • 下载

android 高仿UC浏览器首页上拉面板效果

android 高仿UC浏览器首页上拉面板效果,最近在项目中,产品经理看见uc浏览器首页的上拉面板的效果做的非常不错,于是希望我们的项目的首页也做成这样的效果。于是经过思考后,实现了一个仿uc浏览器的...
  • only1994
  • only1994
  • 2016年04月16日 13:58
  • 4866

UC浏览器首页滑动动画实现

UC浏览器首页滑动动画实现我们先来看下UC浏览器首页的滑动动画和我最终实现的动画效果 使用方式...
  • huyongl1989
  • huyongl1989
  • 2016年05月26日 23:25
  • 3255

android-自定义View-PagerIndicatorView(仿UC浏览区主界面导航)

UC浏览器一直在用,其中
  • lhlhlh111000
  • lhlhlh111000
  • 2014年09月22日 09:09
  • 1293

网页背景色

  • 2015年12月02日 15:18
  • 178B
  • 下载

移动鼠标改变网页背景色

  • 2017年08月02日 10:28
  • 1KB
  • 下载

js获得网页背景色和字体色的方法

获得网页的背景色和字体颜色,方法如下:  思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 :  var...
  • u014401542
  • u014401542
  • 2014年03月27日 22:11
  • 480

网页背景色渐变效果

背景色渐变: 参数说明: GradientType为渐变类型,0为上下渐变,1为左右渐变 StartColorStr为开始颜色 EndColorStr为结束颜色 背景色透明: ...
  • kalision
  • kalision
  • 2012年03月30日 21:38
  • 9501

CSS实现网页背景颜色渐变的效果(火狐浏览器,IE,)

今天做网站时出现CSS实现网页背景颜色渐变的效果在IE里可以显示,但是在firefox里显示不出来。特地找出来在firefox里的实现。看到了这边文章,文章网址是:http://hi.baidu.co...
  • zhaoyingjiao
  • zhaoyingjiao
  • 2013年05月24日 12:10
  • 1473

[转]firefox浏览器油猴脚本-让网页背景成苹果蓝,保护眼睛

来自奶牛blog感觉挺好的对眼睛挺好的就转过来了..保存一下,以后重装了什么的用的到  前段时间发布了opera浏览器的应用,这几天捣鼓了下firefox-4.0。部分移植过来了先看效果对比图设置前:...
  • zjy3186511
  • zjy3186511
  • 2011年02月13日 23:28
  • 3973
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android仿UC浏览器切换网页背景色
举报原因:
原因补充:

(最多只允许输入30个字)