UIWebView與JS的深度交互

jopen 9年前發布 | 20K 次閱讀 UIWebView iOS開發移動開發

原文 http://kittenyang.com/webviewjavascriptbridgeshi-ji-ying-yong-ze/

事情的起因還要因為項目需求驅動。折騰了兩天，由于之前沒有UIWebView與JS交互的經歷，并且覺得有功能上一定的創造性，特此留下一點文字，方便日后回顧。

</div>

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

<html>  
<head>  
  <title></title>
  <meta charset='utf-8'><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="image.js"></script><script type="text/javascript" src="zepto.min.js"></script>
</head>
<body onload="onLoaded()">  
...
</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等。如果你有其它的業務需求，也基本按照這個流程就可以依樣畫葫蘆了，唯一不同的也就是業務邏輯了。

下面我再舉一個例子。也是出現在我的業務需求里的，就是點擊網頁上的圖片，圖片會以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。

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 這個開源庫實現圖片瀏覽。

    [_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的深度交互的例子。

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

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1439008225020.html

UIWebView iOS開發移動開發