我要實現這樣一個需求：按照本地的CSS文件展示一串網絡獲取的帶HTML格式的只有body部分的文本，需要自己拼寫完整的HTML。除此之外，還需要禁用獲取的HTML文本中自帶的 《 img 》 標簽自動加載，并把下載圖片的操作放在native端來處理，并通過JS將圖片在Cache中的地址返回給UIWebview。
之所以要把圖片操作放在native端做的好處在于：
1、可以進行本地緩存，下次進入這篇文章可以直接從緩存讀取，提高響應速度并且節省用戶流量。
2、可以實現點擊圖片放大、保存圖片到相冊等操作。
技術難點也有兩個：
1、如何讓HTML文本onLoad的時候，禁用自身的圖片加載而是從本地獲取圖片？
2、如何把native端下載好的圖片返回給網頁？
起初，我也是束手無策，翻看文檔可只找到了一個 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script 和JS簡易交互的方法，未能如愿。直到我在Github上看到了WebViewJavascriptBridge 這個用于UIWebView/WebViews和JS交互的封裝庫。
剛看sample的時候我差點沒被各種回調搞暈，好記性不如爛筆頭，我從來不掩飾自己的愚笨，所以我畫了一個關系圖。在放圖之前，我們先看代碼。
一開始，我們在Native端和JS端都分別進行初始化：
OC端：
?@property WebViewJavascriptBridge* bridge;
對應的初始化代碼如下，在初始化中直接包含了一個用于接收JS的回調：
?_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都有這兩個方法，所以對應的四種關系是：
以上表中的對應關系的解讀是，例如第一條：在JS中如果調用了bridge.send()，那么將觸發OC端_bridge初始化方法中的回調。
同理，第二條，在JS中調用了bridge.callHandler('testJavascriptHandler')，它將觸發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)
?})
了解了使用規則，下面來看看在我們這個實際需求中應用的整體思路：
—— 1 ——
首先，我們要做的第一步是替換獲取的HTML文本中默認的src，以避免其會自動加載圖片。
?NSString *_content = [contentstring stringByReplacingOccurrencesOfString:@"src" withString:@"esrc"];
—— 2 ——
因為我們獲取的只是HTML的body部分，因此我們需要自己書寫完整的HTML。
我們讓《body onload="onLoaded()"》的時候去調用JS中的 onLoaded()函數。在這個函數中我們遍歷所有img標簽的 esrc，保存為一個數組返回給 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 會觸發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];
? ? ?//初始化一個置空元素數組
? ? ?_allImagesOfThisArticle = [NSMutableArray arrayWithCapacity:imageUrls.count];//本地的一個用于保存所有圖片的數組
? ? ?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]] 會觸發JS中的 function imagesDownloadComplete()。在這個函數中遍歷所有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交互實現本地處理網頁圖片的下載操作就基本完成了。這個例子展現了一個完整的過程，基本涉及了JS和OC的各種交互包括OC調用JS、JS調用OC等。如果你有其它的業務需求，也基本按照這個流程就可以依樣畫葫蘆了，唯一不同的也就是業務邏輯了。
