为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'""}"];

最终效果图

为UIWebView加入夜间模式