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的颜色值就可以了。

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

相关文章推荐

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

入职的第一天,项目遇到一些技术难题,负责人就说,你懂一些h5,你看看怎么解决webview白昼/夜间模式。然后查了一些资料,找了一些思路;总结下来; 场景:新闻类APP,通过WebVie...
  • Kern_
  • Kern_
  • 2017年10月24日 17:33
  • 74

UIWebView注入js代码来改变其背景颜色和尺寸大小

前言 有时候我们需要设置UIWebView的背景颜色,发现用backgroundColor并不起作用。还会遇到网页显示比实际UIWebView的尺寸大的问题。下面就说说用注入JS代码的方法来解决这些问...

android中Webview与javascript的交互(互相调用)

最近做android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程。如下demo,demo的主...

自定义Behavior的艺术探索-仿UC浏览器主页

自定义Behavior实现UC浏览器主页

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

Android获取view某个坐标的颜色值,更改状态栏颜色

今天做一个Android项目,其中用到一个小功能,要将状态栏的颜色设置和界面风格一样,动态变化。 界面是一个webview,也就是状态栏的颜色要和网页头部颜色保持一样的颜色风格,做完了,在这记录一下。...

UIWebView注入js代码来改变其背景颜色和尺寸大小

前言 有时候我们需要设置UIWebView的背景颜色,发现用backgroundColor并不起作用。还会遇到网页显示比实际UIWebView的尺寸大的问题。下面就说说用注入JS代码的方法来解决这些问...

Java获得Class对象的几种方式

1.类、枚举、接口、注解、数组类型、原生类型的名称.class 示例:Class classString=String.class;//类 Class classEnum=RetentionPoli...

网页背景色

  • 2015年12月02日 15:18
  • 178B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android仿UC浏览器切换网页背景色
举报原因:
原因补充:

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