UIWebView與JS的深度交互

事情的原由仍是由於項目需求驅動。折騰了兩天，因爲以前沒有UIWebView與JS交互的經歷，而且以爲此次在功能上有必定的創造性，特此留下一點文字，方便往後回顧。

我要實現這樣一個需求：按照本地的CSS文件展現一串網絡獲取的帶HTML格式的只有body部分的文本，須要本身拼寫完整的HTML。除此以外，還須要禁用獲取的HTML文本中自帶的 《 img 》 標籤自動加載，並把下載圖片的操做放在native端來處理，並經過JS將圖片在Cache中的地址返回給UIWebview。

之因此要把圖片操做放在native端作的好處在於：一、能夠進行本地緩存，下次進入這篇文章能夠直接從緩存讀取，提升響應速度而且節省用戶流量。二、能夠實現點擊圖片放大、保存圖片到相冊等操做。

技術難點也有兩個：一、如何讓HTML文本onLoad的時候，禁用自身的圖片加載而是從本地獲取圖片？二、如何把native端下載好的圖片返回給網頁？

起初，我也是一籌莫展，翻看文檔可只找到了一個 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script 和JS簡易交互的方法，未能如願。直到我在Github上看到了WebViewJavascriptBridge 這個用於UIWebView/WebViews和JS交互的封裝庫。

剛看sample的時候我差點沒被各類回調搞暈，好記性不如爛筆頭，我歷來不掩飾本身的愚笨，因此我畫了一個關係圖。在放圖以前，咱們先看代碼。

一開始，咱們在Native端和JS端都分別進行初始化：

OC端：

1	@property WebViewJavascriptBridge* bridge;

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

1 2 3 4

_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文件中必須包含以下代碼)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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端註冊的同名方法:

1 2 3 4 5 6

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，以免其會自動加載圖片。

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

—— 2 ——

由於咱們獲取的只是HTML的body部分，所以咱們須要本身書寫完整的HTML。

咱們讓《body onload="onLoaded()"》的時候去調用JS中的 onLoaded()函數。在這個函數中咱們遍歷全部img標籤的 esrc，保存爲一個數組返回給 OC 端，讓native端去下載這些圖片。

1 2 3 4 5 6 7 8 9 10 11 12

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。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

#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。

1 2 3 4 5 6 7 8 9

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等。若是你有其它的業務需求，也基本按照這個流程就能夠依樣畫葫蘆了，惟一不一樣的也就是業務邏輯了。

下面我再舉一個例子。也是出如今個人業務需求裏的，就是點擊網頁上的圖片，圖片會以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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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( "檢測到點擊" );          bridge.callHandler( 'imageDidClicked' , { 'index' :index, 'x' :x, 'y' :y, 'width' :width, 'height' :height},  function (response) {              console.log( "JS已經發出imgurl和index，同時收到回調，說明OC已經收到數據" );          });      }); }

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 2 3 4 5 6 7 8 9 10 11 12 13 14

[_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是一個本地數組用來存放全部圖片          NSLog(@ "OC已經收到JS的imageDidClicked了: %@" , data);          responseCallback(@ "OC已經收到JS的imageDidClicked了" );          //點擊放大圖片          [self presentPhotosBrowserWithInitialPage:index animatedFromView:tappedImageView];      }];

Tips

因爲我用的是Sublime Text,因此沒法進行JS的調試。若是要用Atom調試，又感受有點小題大作。我就是想要有個地方能夠輕鬆地看到是否打印出了console.log或者JS函數是否被調用了。始終相信，任何問題都是能夠解決的。咱們能夠用Safari。

連上你的iPhone或者使用模擬器，當你的程序當前顯示了一個UIWebView，Safari會自動識別這個UIWebview，並能夠在開發菜單欄中找到你的設備進行調試。

選擇控制檯,你就能夠看到久違的調試窗口以及JS的console.log了。

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