为UIWebView加入夜间模式

0、关键词

UIWebView，夜间模式，Native-Web交互， CSS

1、问题提出

某网页点击进入是某APP的二级页面。为了使用户获得原生应用的体验需要对页面进行优化。

网页截图

2.核心代码

作用：实现OC与JS代码间的转换和交互。

[webView stringByEvaluatingJavaScriptFromString:@"[email protected]"];

无论是原生应用界面还是网页，APP界面应始终保持统一的风格。为了让网页尽可能还原出原生应用的界面效果，可从以下几个方面优化。

3.实现

3.1为NavigationItem设置标题

从原生应用界面跳转至网页时，NavigationItem没有标题会使用户感觉到明显的异样，因此可从当前网页的HTML的下的解析出title值，并赋给navigationItem.title。
以下是该网页HTML的head部分。

以下为实现方式之一的主要代码。

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:@"[email protected]"]改变网页颜色了。同样的需要在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;
}