0、關(guān)鍵詞
UIWebView，夜間模式，Native-Web交互， CSS
1、問題提出
某網(wǎng)頁點擊進入是某APP的二級頁面。為了使用戶獲得原生應用的體驗需要對頁面進行優(yōu)化。
2.核心代碼
作用：實現(xiàn)OC與JS代碼間的轉(zhuǎn)換和交互。
[webView stringByEvaluatingJavaScriptFromString:@"e.g.liushuai1992@gmail.com"];
無論是原生應用界面還是網(wǎng)頁，APP界面應始終保持統(tǒng)一的風格。為了讓網(wǎng)頁盡可能還原出原生應用的界面效果，可從以下幾個方面優(yōu)化。
3.實現(xiàn)
3.1為NavigationItem設(shè)置標題
從原生應用界面跳轉(zhuǎn)至網(wǎng)頁時，NavigationItem沒有標題會使用戶感覺到明顯的異樣，因此可從當前網(wǎng)頁的HTML的<head></head>下的<title></title>解析出title值，并賦給navigationItem.title。
以下是該網(wǎng)頁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" />
<link rel="stylesheet" />
</head>
...
</html>
以下為實現(xiàn)方式之一的主要代碼。
self.navigationItem.title = [NSString stringWithString:[webView stringByEvaluatingJavaScriptFromString:@"document.title"]];
需要注意的是，只有當網(wǎng)頁加載完成之后才可以從網(wǎng)頁的HTML代碼中解析出標題，所以需要選取一個合適的時機執(zhí)行以上代碼。UIWebView的協(xié)議方法- (void)webViewDidFinishLoad:(UIWebView *)webView是一個比較恰當?shù)臅r間點。
3.2夜間模式
如果APP擁有夜間模式，那么從原生界面跳轉(zhuǎn)至白底黑字的網(wǎng)頁時，會顯得非常不友好，好在可以通過js動態(tài)修改網(wǎng)頁CSS的做法為網(wǎng)頁也實現(xiàn)夜間模式，主要思想是根據(jù)當前狀態(tài)（夜間/日間）更改網(wǎng)頁背景和字體的顏色。在網(wǎng)頁的body部分很容易找到了相關(guān)顏色，其中background為網(wǎng)頁背景顏色，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;
}
找到CSS的具體位置后我們就可以在OC中通過[webView stringByEvaluatingJavaScriptFromString:@"e.g.liushuai1992@gmail.com"]改變網(wǎng)頁顏色了。同樣的需要在HTML解析完成之后更改顏色，所以可以在- (void)webViewDidFinishLoad:(UIWebView *)webView協(xié)議方法中實現(xiàn)。
以下是核心代碼。
//修改文字顏色
[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#C8C8C8'"];
//修改body背景顏色
[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.background='#2C2C2C'"];
此網(wǎng)頁僅僅修改body的背景和字體顏色是不夠的，仍有部分白色區(qū)域，下圖是修改之后的效果圖。
通過網(wǎng)頁調(diào)試工具又找到了如下CSS段，其中的background的顏色為白色區(qū)域的顏色。
.hotel-room {
margin-bottom: 15px;
background: #fff;
}
以下是核心代碼及最終效果圖。
[self.webView stringByEvaluatingJavaScriptFromString:@"var hotel = document.getElementsByClassName('hotel-room');""for(i=0;i<hotel.length;i++){""hotel.item(i).style.background='#2C2C2C'""}"];
