[[145431]]

事情的起因還是因?yàn)轫?xiàng)目需求驅(qū)動(dòng)。折騰了兩天，由于之前沒(méi)有UIWebView與JS交互的經(jīng)歷，并且覺(jué)得這次在功能上有一定的創(chuàng)造性，特此留下一點(diǎn)文字，方便日后回顧。

我要實(shí)現(xiàn)這樣一個(gè)需求：按照本地的CSS文件展示一串網(wǎng)絡(luò)獲取的帶HTML格式的只有body部分的文本，需要自己拼寫完整的HTML。除此之外，還需要禁用獲取的HTML文本中自帶的 《 img 》 標(biāo)簽自動(dòng)加載，并把下載圖片的操作放在native端來(lái)處理，并通過(guò)JS將圖片在Cache中的地址返回給UIWebview。

之所以要把圖片操作放在native端做的好處在于：1、可以進(jìn)行本地緩存，下次進(jìn)入這篇文章可以直接從緩存讀取，提高響應(yīng)速度并且節(jié)省用戶流量。2、可以實(shí)現(xiàn)點(diǎn)擊圖片放大、保存圖片到相冊(cè)等操作。

技術(shù)難點(diǎn)也有兩個(gè)：1、如何讓HTML文本onLoad的時(shí)候，禁用自身的圖片加載而是從本地獲取圖片？2、如何把native端下載好的圖片返回給網(wǎng)頁(yè)？

起初，我也是束手無(wú)策，翻看文檔可只找到了一個(gè) - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script 和JS簡(jiǎn)易交互的方法，未能如愿。直到我在Github上看到了WebViewJavascriptBridge 這個(gè)用于UIWebView/WebViews和JS交互的封裝庫(kù)。

剛看sample的時(shí)候我差點(diǎn)沒(méi)被各種回調(diào)搞暈，好記性不如爛筆頭，我從來(lái)不掩飾自己的愚笨，所以我畫了一個(gè)關(guān)系圖。在放圖之前，我們先看代碼。

一開始，我們?cè)贜ative端和JS端都分別進(jìn)行初始化：

OC端：
 

@property WebViewJavascriptBridge* bridge; 

對(duì)應(yīng)的初始化代碼如下，在初始化中直接包含了一個(gè)用于接收J(rèn)S的回調(diào)：

_bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { 
NSLog(@"ObjC received message from JS: %@", data); 
responseCallback(@"Response for message from ObjC"); 
}]; 

JS端：(以下是固定寫法，你自己的JS文件中必須包含如下代碼)

function connectWebViewJavascriptBridge(callback) { 
if (window.WebViewJavascriptBridge) { 
callback(WebViewJavascriptBridge) 
} else { 
document.addEventListener('WebViewJavascriptBridgeReady', function() { 
callback(WebViewJavascriptBridge) 
}, false) 
} 
} 
connectWebViewJavascriptBridge(function(bridge) { 
bridge.init(function(message, responseCallback) { 
log('JS got a message', message) 
var data = { 'Javascript Responds':'Wee!' } 
log('JS responding with', data) 
responseCallback(data) 
}) 
} 

然后，我們要知道，在WebViewJavascriptBridge中，交互的方式只有兩種：send 和 callHandle，JS和OC都有這兩個(gè)方法，所以對(duì)應(yīng)的四種關(guān)系是：

以上表中的對(duì)應(yīng)關(guān)系的解讀是，例如第一條：在JS中如果調(diào)用了bridge.send()，那么將觸發(fā)OC端_bridge初始化方法中的回調(diào)。

同理，第二條，在JS中調(diào)用了bridge.callHandler('testJavascriptHandler')，它將觸發(fā)OC端注冊(cè)的同名方法:

bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) { 
log('ObjC called testJavascriptHandler with', data) 
var responseData = { 'Javascript Says':'Right back atcha!' } 
log('JS responding with', responseData) 
responseCallback(responseData) 
}) 

了解了使用規(guī)則，下面來(lái)看看在我們這個(gè)實(shí)際需求中應(yīng)用的整體思路：

—— 1 ——

首先，我們要做的第一步是替換獲取的HTML文本中默認(rèn)的src，以避免其會(huì)自動(dòng)加載圖片。

NSString *_content = [contentstring stringByReplacingOccurrencesOfString:@"src" withString:@"esrc"]; 

—— 2 ——

因?yàn)槲覀儷@取的只是HTML的body部分，因此我們需要自己書寫完整的HTML。

我們讓《body onload="onLoaded()"》的時(shí)候去調(diào)用JS中的 onLoaded()函數(shù)。在這個(gè)函數(shù)中我們遍歷所有img標(biāo)簽的 esrc，保存為一個(gè)數(shù)組返回給 OC 端，讓native端去下載這些圖片。

function onLoaded() { 
connectWebViewJavascriptBridge(function(bridge) { 
var allImage = document.querySelectorAll("img"); 
allImage = Array.prototype.slice.call(allImage, 0); 
var imageUrlsArray = new Array(); 
allImage.forEach(function(image) { 
var esrc = image.getAttribute("esrc"); 
var newLength = imageUrlsArray.push(esrc); 
}); 
bridge.send(imageUrlsArray); 
}); 
} 

—— 3 ——

bridge.send 會(huì)觸發(fā)WebViewJavascriptBridge初始化方法 + (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*)webViewDelegate handler:(WVJBHandler)handler; 中的handler，我們?cè)趆andler的block中下載所有圖片。并且把下載完的圖片在cache中的地址返回個(gè)JS。

#pragma mark -- 下載全部圖片 
-(void)downloadAllImagesInNative:(NSArray *)imageUrls{ 
SDWebImageManager *manager = [SDWebImageManager sharedManager]; 
//初始化一個(gè)置空元素?cái)?shù)組 
_allImagesOfThisArticle = [NSMutableArray arrayWithCapacity:imageUrls.count];//本地的一個(gè)用于保存所有圖片的數(shù)組 
for (NSUInteger i = 0; i < imageUrls.count-1; i++) { 
[_allImagesOfThisArticle addObject:[NSNull null]]; 
} 
for (NSUInteger i = 0; i < imageUrls.count-1; i++) { 
NSString *_url = imageUrls[i]; 
[manager downloadImageWithURL:[NSURL URLWithString:_url] options:SDWebImageHighPriority progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) { 
if (image) { 
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ 
NSString *imgB64 = [UIImageJPEGRepresentation(image, 1.0) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength]; 
//把圖片在磁盤中的地址傳回給JS 
NSString *key = [manager cacheKeyForURL:imageURL]; 
NSString *source = [NSString stringWithFormat:@"data:image/png;base64,%@", imgB64]; 
[_bridge callHandler:@"imagesDownloadComplete" data:@[key,source]]; 
}); 
} 
}]; 
} 
} 

—— 4 ——

[_bridge callHandler:@"imagesDownloadComplete" data:@[key,source]] 會(huì)觸發(fā)JS中的 function imagesDownloadComplete()。在這個(gè)函數(shù)中遍歷所有img標(biāo)簽，把傳過(guò)來(lái)的圖片地址賦值給img的src。

function imagesDownloadComplete(pOldUrl, pNewUrl) { 
var allImage = document.querySelectorAll("img"); 
allImage = Array.prototype.slice.call(allImage, 0); 
allImage.forEach(function(image) { 
if (image.getAttribute("esrc") == pOldUrl || image.getAttribute("esrc") == decodeURIComponent(pOldUrl)) { 
image.src = pNewUrl; 
} 
}); 
} 

至此，通過(guò)WebViewJavascriptBridge處理UIWebView和JS交互實(shí)現(xiàn)本地處理網(wǎng)頁(yè)圖片的下載操作就基本完成了。這個(gè)例子展現(xiàn)了一個(gè)完整的過(guò)程，基本涉及了JS和OC的各種交互包括OC調(diào)用JS、JS調(diào)用OC等。如果你有其它的業(yè)務(wù)需求，也基本按照這個(gè)流程就可以依樣畫葫蘆了，唯一不同的也就是業(yè)務(wù)邏輯了。

下面我再舉一個(gè)例子。也是出現(xiàn)在我的業(yè)務(wù)需求里的，就是點(diǎn)擊網(wǎng)頁(yè)上的圖片，圖片會(huì)以Zoom-out的動(dòng)畫放大，左右滑動(dòng)可以查看其它圖片，同時(shí)還需要雙擊放大查看、保存圖片等功能。 類似這樣:

乍一看，我們點(diǎn)擊的是一張網(wǎng)頁(yè)上的圖片，怎么可能讓這張圖片單獨(dú)跳出來(lái)？而且還能左右滑動(dòng)顯示其它圖片？

首先我們還是需要去改造網(wǎng)絡(luò)獲取的那段HTML文本，正則匹配出 img esrc=http://....,加上onClick事件，綁定一個(gè)JS的方法，并把這個(gè)esrc作為參數(shù)傳入這個(gè)綁定的方法中。

//正則替換 
 
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"(《img[^》]+esrc=\")(\\S+)\"" options:0 error:nil]; 
 
result = [regex stringByReplacingMatchesInString:newContent options:0 range:NSMakeRange(0, newContent.length) withTemplate:@"《img esrc=\"$2\" onClick=\"javascript:onImageClick('$2')\""]; 

JS中onImageClick()函數(shù)。這個(gè)函數(shù)的主要任務(wù)是：獲取點(diǎn)擊圖片的在所有圖片中的編號(hào)以及在當(dāng)前屏幕中的位置。并把這些信息返回給OC。

function onImageClick(picUrl){ 
connectWebViewJavascriptBridge(function(bridge) { 
var allImage = document.querySelectorAll("p img[esrc]"); 
allImage = Array.prototype.slice.call(allImage, 0); 
var urls = new Array(); 
var index = -1; 
var x = 0; 
var y = 0; 
var width = 0; 
var height = 0; 
allImage.forEach(function(image) { 
var imgUrl = image.getAttribute("esrc"); 
var newLength = urls.push(imgUrl); 
if(imgUrl == picUrl || imgUrl == decodeURIComponent(picUrl)){ 
index = newLength-1; 
x = image.getBoundingClientRect().left; 
y = image.getBoundingClientRect().top; 
x = x + document.documentElement.scrollLeft; 
y = y + document.documentElement.scrollTop; 
width = image.width; 
height = image.height; 
console.log("x:"+x +";y:" + y+";width:"+image.width +";height:"+image.height); 
} 
}); 
console.log("檢測(cè)到點(diǎn)擊"); 
bridge.callHandler('imageDidClicked', {'index':index,'x':x,'y':y,'width':width,'height':height}, function(response) { 
console.log("JS已經(jīng)發(fā)出imgurl和index，同時(shí)收到回調(diào)，說(shuō)明OC已經(jīng)收到數(shù)據(jù)"); 
}); 
}); 
} 

bridge.callHandler 會(huì)觸發(fā)OC中的 [_bridge registerHandler:@"imageDidClicked" handler:^(id data, WVJBResponseCallback responseCallback){}]。我們可以再handler中獲得JS傳過(guò)來(lái)的點(diǎn)擊圖片在所有圖片中的編號(hào)，以及點(diǎn)擊圖片在當(dāng)前圖片中的空間位置。要實(shí)現(xiàn)點(diǎn)擊圖片Zoom-out的效果，我們要善于「作弊」。網(wǎng)頁(yè)中的圖片固然不能「跳」出來(lái)放大，但我們可以根據(jù)JS傳回來(lái)的x、y、width、height這些位置信息自己創(chuàng)建一個(gè)UIImageView,image和當(dāng)前點(diǎn)擊圖片一致，設(shè)置透明度為0，add到UIWebView上面。并通過(guò)IDMPhotoBrowser 這個(gè)開源庫(kù)實(shí)現(xiàn)圖片瀏覽。

[_bridge registerHandler:@"imageDidClicked" handler:^(id data, WVJBResponseCallback responseCallback) { 
NSInteger index = [[data objectForKey:@"index"] integerValue]; 
CGFloat originX = [[data objectForKey:@"x"] floatValue]; 
CGFloat originY = [[data objectForKey:@"y"] floatValue]; 
CGFloat width = [[data objectForKey:@"width"] floatValue]; 
CGFloat height = [[data objectForKey:@"height"] floatValue]; 
tappedImageView.alpha = 0; 
tappedImageView.frame = CGRectMake(originX, originY, width, height); 
tappedImageView.image = _allImagesOfThisArticle[index];//_allImagesOfThisArticle是一個(gè)本地?cái)?shù)組用來(lái)存放所有圖片 
NSLog(@"OC已經(jīng)收到JS的imageDidClicked了: %@", data); 
responseCallback(@"OC已經(jīng)收到JS的imageDidClicked了"); 
//點(diǎn)擊放大圖片 
[self presentPhotosBrowserWithInitialPage:index animatedFromView:tappedImageView]; 
}]; 

Tips

由于我用的是Sublime Text,所以無(wú)法進(jìn)行JS的調(diào)試。如果要用Atom調(diào)試，又感覺(jué)有點(diǎn)小題大做。我就是想要有個(gè)地方可以輕松地看到是否打印出了console.log或者JS函數(shù)是否被調(diào)用了。始終相信，任何問(wèn)題都是可以解決的。我們可以用Safari。

連上你的iPhone或者使用模擬器，當(dāng)你的程序當(dāng)前顯示了一個(gè)UIWebView，Safari會(huì)自動(dòng)識(shí)別這個(gè)UIWebview，并可以在開發(fā)菜單欄中找到你的設(shè)備進(jìn)行調(diào)試。

選擇控制臺(tái),你就可以看到久違的調(diào)試窗口以及JS的console.log了。

以上就是使用 WebViewJavascriptBridge 進(jìn)行UIWebView與JS的深度交互的例子。

折騰WebViewJavascriptBridge的這幾天下來(lái)，我最大的感受就是，學(xué)無(wú)止境。想想Node.JS都可以寫服務(wù)器了，React Native都可以開發(fā)iOS了，而且Github上最流行的語(yǔ)言就是JS，導(dǎo)致我又有點(diǎn)想學(xué)JS了。但我又冷靜了下來(lái)，明確自己的主要任務(wù)什么，想到Swift都沒(méi)吃透呢，哪有時(shí)間去搞前端。根據(jù)我的經(jīng)驗(yàn)，讓我睡一覺(jué)，估計(jì)明天就沒(méi)這個(gè)想法了^-^