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