我要實現(xiàn)這樣一個需求：按照本地的CSS文件展示一串網(wǎng)絡(luò)獲取的帶HTML格式的只有body部分的文本粱坤，需要自己拼寫完整的HTML菠隆。除此之外纯蛾，還需要禁用獲取的HTML文本中自帶的 《 img 》 標簽自動加載节猿，并把下載圖片的操作放在native端來處理棠耕，并通過JS將圖片在Cache中的地址返回給UIWebview睛竣。
之所以要把圖片操作放在native端做的好處在于：
1晰房、可以進行本地緩存，下次進入這篇文章可以直接從緩存讀取射沟，提高響應(yīng)速度并且節(jié)省用戶流量殊者。
2、可以實現(xiàn)點擊圖片放大验夯、保存圖片到相冊等操作猖吴。
技術(shù)難點也有兩個：
1、如何讓HTML文本onLoad的時候挥转，禁用自身的圖片加載而是從本地獲取圖片距误？
2簸搞、如何把native端下載好的圖片返回給網(wǎng)頁？
起初准潭，我也是束手無策趁俊，翻看文檔可只找到了一個 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script 和JS簡易交互的方法，未能如愿刑然。直到我在Github上看到了WebViewJavascriptBridge 這個用于UIWebView/WebViews和JS交互的封裝庫寺擂。
剛看sample的時候我差點沒被各種回調(diào)搞暈，好記性不如爛筆頭泼掠，我從來不掩飾自己的愚笨怔软，所以我畫了一個關(guān)系圖。在放圖之前择镇，我們先看代碼挡逼。
一開始，我們在Native端和JS端都分別進行初始化：
OC端：
?@property WebViewJavascriptBridge* bridge;
對應(yīng)的初始化代碼如下腻豌，在初始化中直接包含了一個用于接收JS的回調(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都有這兩個方法苏携，所以對應(yīng)的四種關(guān)系是：
以上表中的對應(yīng)關(guān)系的解讀是做瞪，例如第一條：在JS中如果調(diào)用了bridge.send()，那么將觸發(fā)OC端_bridge初始化方法中的回調(diào)右冻。
同理装蓬，第二條，在JS中調(diào)用了bridge.callHandler('testJavascriptHandler')纱扭，它將觸發(fā)OC端注冊的同名方法:
?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ī)則矛物，下面來看看在我們這個實際需求中應(yīng)用的整體思路：
—— 1 ——
首先，我們要做的第一步是替換獲取的HTML文本中默認的src跪但，以避免其會自動加載圖片。
?NSString *_content = [contentstring stringByReplacingOccurrencesOfString:@"src" withString:@"esrc"];
—— 2 ——
因為我們獲取的只是HTML的body部分峦萎，因此我們需要自己書寫完整的HTML屡久。
我們讓《body onload="onLoaded()"》的時候去調(diào)用JS中的 onLoaded()函數(shù)。在這個函數(shù)中我們遍歷所有img標簽的 esrc爱榔，保存為一個數(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 會觸發(fā)WebViewJavascriptBridge初始化方法 + (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*)webViewDelegate handler:(WVJBHandler)handler; 中的handler详幽，我們在handler的block中下載所有圖片筛欢。并且把下載完的圖片在cache中的地址返回個JS浸锨。
?#pragma mark -- 下載全部圖片
?-(void)downloadAllImagesInNative:(NSArray *)imageUrls{
? ? ?SDWebImageManager *manager = [SDWebImageManager sharedManager];
? ? ?//初始化一個置空元素數(shù)組
? ? ?_allImagesOfThisArticle = [NSMutableArray arrayWithCapacity:imageUrls.count];//本地的一個用于保存所有圖片的數(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]] 會觸發(fā)JS中的 function imagesDownloadComplete()。在這個函數(shù)中遍歷所有img標簽版姑，把傳過來的圖片地址賦值給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;
? ? ? ? ?}
? ? ?});
?}
至此，通過WebViewJavascriptBridge處理UIWebView和JS交互實現(xiàn)本地處理網(wǎng)頁圖片的下載操作就基本完成了剥险。這個例子展現(xiàn)了一個完整的過程聪蘸，基本涉及了JS和OC的各種交互包括OC調(diào)用JS、JS調(diào)用OC等表制。如果你有其它的業(yè)務(wù)需求健爬，也基本按照這個流程就可以依樣畫葫蘆了，唯一不同的也就是業(yè)務(wù)邏輯了么介。
