UIWebView与JS的深度交互-b

要实现这样一个需求：按照本地的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端：

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

…

咱们让  的时候去调用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=\”ewqfewqfewqveveavewv  cfwfew ewvw vweqvw2’)\””];

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都没吃透呢，哪有时间去搞前端。