[轉]OC與JS的互動詳解

標籤：node.js   gif   bsp   with   網頁   1.0   initial   else   痛點   

http://www.cnblogs.com/wenxp2006/p/4777937.html

 

 

 

 

事情的起因還是因為項目需求驅動。折騰了兩天，由於之前沒有UIWebView與JS互動的經曆，並且覺得這次在功能上有一定的創造性，特此留下一點文字，方便日後回顧。

我要實現這樣一個需求：按照本地的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端： 

  1 @property WebViewJavascriptBridge* bridge; 

對應的初始化代碼如下，在初始化中直接包含了一個用於接收JS的回調：

 

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

 

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

 

 1 function connectWebViewJavascriptBridge(callback) {   2     if (window.WebViewJavascriptBridge) { 3         callback(WebViewJavascriptBridge) 4     } else { 5         document.addEventListener(‘WebViewJavascriptBridgeReady‘,   function() { 6             callback(WebViewJavascriptBridge) 7         }, false) 8     } 9 }10 connectWebViewJavascriptBridge(function(bridge) {  11     bridge.init(function(message, responseCallback) {12         log(‘JS got a message‘, message)13         var data = { ‘Javascript Responds‘:‘Wee!‘ }14         log(‘JS responding with‘, data)15         responseCallback(data)16     })17 }

 

然後，我們要知道，在WebViewJavascriptBridge中，互動的方式只有兩種：send 和 callHandle，JS和OC都有這兩個方法，所以對應的四種關係是：

以上表中的對應關係的解讀是，例如第一條：在JS中如果調用了bridge.send()，那麼將觸發OC端_bridge初始化方法中的回調。

同理，第二條，在JS中調用了bridge.callHandler(‘testJavascriptHandler‘)，它將觸發OC端註冊的同名方法:

 

1 bridge.registerHandler(‘testJavascriptHandler‘, function(data, responseCallback) {  2         log(‘ObjC called testJavascriptHandler with‘, data)3         var responseData = { ‘Javascript Says‘:‘Right back atcha!‘ }4         log(‘JS responding with‘, responseData)5         responseCallback(responseData)6 })

 

瞭解了使用規則，下面來看看在我們這個實際需求中應用的整體思路：

—— 1 ——

首先，我們要做的第一步是替換擷取的HTML文本中預設的src，以避免其會自動載入圖片。

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

—— 2 ——

因為我們擷取的只是HTML的body部分，因此我們需要自己書寫完整的HTML。

我們讓《body onload="onLoaded()"》的時候去調用JS中的 onLoaded()函數。在這個函數中我們遍曆所有img標籤的 esrc，儲存為一個數組返回給 OC 端，讓native端去下載這些圖片。

 

 1 function onLoaded() { 2     connectWebViewJavascriptBridge(function(bridge) { 3         var allImage = document.querySelectorAll("img"); 4         allImage = Array.prototype.slice.call(allImage, 0); 5         var imageUrlsArray = new Array(); 6         allImage.forEach(function(image) { 7             var esrc = image.getAttribute("esrc"); 8             var newLength = imageUrlsArray.push(esrc); 9         });10         bridge.send(imageUrlsArray);11     });12 }

 

—— 3 ——

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

 

 1 #pragma mark -- 下載全部圖片 2 -(void)downloadAllImagesInNative:(NSArray *)imageUrls{ 3     SDWebImageManager *manager = [SDWebImageManager sharedManager]; 4     //初始化一個置空元素數組 5     _allImagesOfThisArticle = [NSMutableArray arrayWithCapacity:imageUrls.count];//本地的一個用於儲存所有圖片的數組 6     for (NSUInteger i = 0; i < imageUrls.count-1; i++) { 7         [_allImagesOfThisArticle addObject:[NSNull null]]; 8     } 9     for (NSUInteger i = 0; i < imageUrls.count-1; i++) {10         NSString *_url = imageUrls[i];11         [manager downloadImageWithURL:[NSURL URLWithString:_url] options:SDWebImageHighPriority progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {12             if (image) {13     dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{14                     NSString *imgB64 = [UIImageJPEGRepresentation(image, 1.0) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];15                     //把圖片在磁碟中的地址傳回給JS16                     NSString *key = [manager cacheKeyForURL:imageURL];17                     NSString *source = [NSString stringWithFormat:@"data:image/png;base64,%@", imgB64];18                     [_bridge callHandler:@"imagesDownloadComplete" data:@[key,source]];19                 });20             }21         }];22     }23 }

 

—— 4 ——

[_bridge callHandler:@"imagesDownloadComplete" data:@[key,source]] 會觸發JS中的 function imagesDownloadComplete()。在這個函數中遍曆所有img標籤，把傳過來的圖片地址賦值給img的src。

 

1 function imagesDownloadComplete(pOldUrl, pNewUrl) {  2     var allImage = document.querySelectorAll("img");3     allImage = Array.prototype.slice.call(allImage, 0);4     allImage.forEach(function(image) {5         if (image.getAttribute("esrc") == pOldUrl || image.getAttribute("esrc") == decodeURIComponent(pOldUrl)) {6             image.src = pNewUrl;7         }8     });9 }

 

至此，通過WebViewJavascriptBridge處理UIWebView和JS互動實現本地處理網頁圖片的下載操作就基本完成了。這個例子展現了一個完整的過程，基本涉及了JS和OC的各種互動包括OC調用JS、JS調用OC等。如果你有其它的業務需求，也基本按照這個流程就可以依樣畫葫蘆了，唯一不同的也就是商務邏輯了。

下面我再舉一個例子。也是出現在我的業務需求裡的，就是點擊網頁上的圖片，圖片會以Zoom-out的動畫放大，左右滑動可以查看其它圖片，同時還需要雙擊放大查看、儲存圖片等功能。 類似這樣:

乍一看，我們點擊的是一張網頁上的圖片，怎麼可能讓這張圖片單獨跳出來？而且還能左右滑動顯示其它圖片？

首先我們還是需要去改造網路擷取的那段HTML文本，正則匹配出 img esrc=http://....,加上onClick事件，綁定一個JS的方法，並把這個esrc作為參數傳入這個綁定的方法中。

//正則替換

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()函數。這個函數的主要任務是：擷取點擊圖片的在所有圖片中的編號以及在當前螢幕中的位置。並把這些資訊返回給OC。

 

 1 function onImageClick(picUrl){ 2     connectWebViewJavascriptBridge(function(bridge) { 3         var allImage = document.querySelectorAll("p img[esrc]"); 4         allImage = Array.prototype.slice.call(allImage, 0); 5         var urls = new Array(); 6         var index = -1; 7         var x = 0; 8         var y = 0; 9         var width = 0;10         var height = 0;11         allImage.forEach(function(image) {12             var imgUrl = image.getAttribute("esrc");13             var newLength = urls.push(imgUrl);14             if(imgUrl == picUrl || imgUrl == decodeURIComponent(picUrl)){15                 index = newLength-1;16                 x = image.getBoundingClientRect().left;17                 y = image.getBoundingClientRect().top;18                 x = x + document.documentElement.scrollLeft;19                 y = y + document.documentElement.scrollTop;20                 width = image.width;21                 height = image.height;22                 console.log("x:"+x +";y:" + y+";width:"+image.width +";height:"+image.height);23             }24         });25         console.log("檢測到點擊");26         bridge.callHandler(‘imageDidClicked‘, {‘index‘:index,‘x‘:x,‘y‘:y,‘width‘:width,‘height‘:height}, function(response) {27             console.log("JS已經發出imgurl和index，同時收到回調，說明OC已經收到資料");28         });29     });30 }

 

bridge.callHandler 會觸發OC中的 [_bridge registerHandler:@"imageDidClicked" handler:^(id data, WVJBResponseCallback responseCallback){}]。我們可以再handler中獲得JS傳過來的點擊圖片在所有圖片中的編號，以及點擊圖片在當前圖片中的空間位置。要實現點擊圖片Zoom-out的效果，我們要善於「作弊」。網頁中的圖片固然不能「跳」出來放大，但我們可以根據JS傳回來的x、y、width、height這些位置資訊自己建立一個UIImageView,image和當前點擊圖片一致，設定透明度為0，add到UIWebView上面。並通過IDMPhotoBrowser 這個開源庫實現圖片瀏覽。

 

 1   [_bridge registerHandler:@"imageDidClicked" handler:^(id data, WVJBResponseCallback responseCallback) { 2         NSInteger index = [[data objectForKey:@"index"] integerValue]; 3         CGFloat originX = [[data objectForKey:@"x"] floatValue]; 4         CGFloat originY = [[data objectForKey:@"y"] floatValue]; 5         CGFloat width   = [[data objectForKey:@"width"] floatValue]; 6         CGFloat height  = [[data objectForKey:@"height"] floatValue]; 7         tappedImageView.alpha = 0; 8         tappedImageView.frame = CGRectMake(originX, originY, width, height); 9         tappedImageView.image = _allImagesOfThisArticle[index];//_allImagesOfThisArticle是一個本地數組用來存放所有圖片10         NSLog(@"OC已經收到JS的imageDidClicked了: %@", data);11         responseCallback(@"OC已經收到JS的imageDidClicked了");12         //點擊放大圖片13         [self presentPhotosBrowserWithInitialPage:index animatedFromView:tappedImageView];14     }];

 

Tips

由於我用的是Sublime Text,所以無法進行JS的調試。如果要用Atom調試，又感覺有點小題大做。我就是想要有個地方可以輕鬆地看到是否列印出了console.log或者JS函數是否被調用了。始終相信，任何問題都是可以解決的。我們可以用Safari。

連上你的iPhone或者使用模擬器，當你的程式當前顯示了一個UIWebView，Safari會自動識別這個UIWebview，並可以在開發功能表列中找到你的裝置進行調試。

選擇控制台,你就可以看到久違的調試視窗以及JS的console.log了。

以上就是使用 WebViewJavascriptBridge 進行UIWebView與JS的深度互動的例子。

折騰WebViewJavascriptBridge的這幾天下來，我最大的感受就是，學無止境。想想Node.JS都可以寫伺服器了，React Native都可以開發iOS了，而且Github上最流行的語言就是JS，導致我又有點想學JS了。但我又冷靜了下來，明確自己的主要任務什麼，想到Swift都沒吃透呢，哪有時間去搞前端。根據我的經驗，讓我睡一覺，估計明天就沒這個想法了^-^

[轉]OC與JS的互動詳解