为UIWebView加入夜间模式
0、关键词
UIWebView，夜间模式，Native-Web交互， CSS
1、问题提出
某网页点击进入是某APP的二级页面。为了使用户获得原生应用的体验需要对页面进行优化。
网页截图
2.核心代码
作用：实现OC与JS代码间的转换和交互。
[webView stringByEvaluatingJavaScriptFromString:@"e.g.liushuai1992@gmail.com"];
无论是原生应用界面还是网页，APP界面应始终保持统一的风格。为了让网页尽可能还原出原生应用的界面效果，可从以下几个方面优化。
3.实现
3.1为NavigationItem设置标题
从原生应用界面跳转至网页时，NavigationItem没有标题会使用户感觉到明显的异样，因此可从当前网页的HTML的<head></head>下的<title></title>解析出title值，并赋给navigationItem.title。
以下是该网页HTML的head部分。
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>日本酒店の美</title>
<link rel="stylesheet" href="http://qiniustatic.breadtrip.com/static/mobile/css/common/7bfdf5ea.vacation_base.css"/>
<link rel="stylesheet" href="http://qiniustatic.breadtrip.com/static/mobile/css/activity15q3/e0b8e108.hotel_topic.css"/>
</head>
...
</html>
以下为实现方式之一的主要代码。
self.navigationItem.title = [NSString stringWithString:[webView stringByEvaluatingJavaScriptFromString:@"document.title"]];
需要注意的是，只有当网页加载完成之后才可以从网页的HTML代码中解析出标题，所以需要选取一个合适的时机执行以上代码。UIWebView的协议方法- (void)webViewDidFinishLoad:(UIWebView *)webView是一个比较恰当的时间点。
左:无title 右:有title
3.2夜间模式
如果APP拥有夜间模式，那么从原生界面跳转至白底黑字的网页时，会显得非常不友好，好在可以通过js动态修改网页CSS的做法为网页也实现夜间模式，主要思想是根据当前状态（夜间/日间）更改网页背景和字体的颜色。在网页的body部分很容易找到了相关颜色，其中background为网页背景颜色，color为字体颜色。
body {
background: #f2f2f2;
font: 14px "Helvetica Neue",STHeitiSC-Light,STHeiti,Tahoma!important;
line-height: 1.5;
max-width: 600px;
margin: 0 auto;
color: #484848;
}
Chrome自带的网页调试工具截图
找到CSS的具体位置后我们就可以在OC中通过[webView stringByEvaluatingJavaScriptFromString:@"e.g.liushuai1992@gmail.com"]改变网页颜色了。同样的需要在HTML解析完成之后更改颜色，所以可以在- (void)webViewDidFinishLoad:(UIWebView *)webView协议方法中实现。
以下是核心代码。
//修改文字颜色
[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#C8C8C8'"];
//修改body背景颜色
[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.background='#2C2C2C'"];
此网页仅仅修改body的背景和字体颜色是不够的，仍有部分白色区域，下图是修改之后的效果图。
修改body的背景和字体颜色之后
通过网页调试工具又找到了如下CSS段，其中的background的颜色为白色区域的颜色。
.hotel-room {
margin-bottom: 15px;
background: #fff;
}
Chrome自带的网页调试工具截图
以下是核心代码及最终效果图。
[self.webView stringByEvaluatingJavaScriptFromString:@"var hotel = document.getElementsByClassName('hotel-room');""for(i=0;i<hotel.length;i++){""hotel.item(i).style.background='#2C2C2C'""}"];
最终效果图
