我爱编程

通过WebViewJavascriptBridge实现OC和JS

2016-09-19  本文已影响168人  大草原之夜

我要实现这样一个需求:按照本地的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等。如果你有其它的业务需求,也基本按照这个流程就可以依样画葫芦了,唯一不同的也就是业务逻辑了。

上一篇下一篇

猜你喜欢

热点阅读