还是项目需求驱动。折腾了两天，由于之前没有UIWebView和JS交互的经验，感觉这次在功能上有一定的创意，特此留一点文字，以备日后回顾。我想实现这样一个需求：根据本地的CSS文件，将一串从网上获取的只有正文部分的文本显示成HTML格式，需要自己拼出完整的HTML。另外需要在获取到的HTML文本中禁止自动加载《 img 》标签，将下载图片的操作放在native端进行处理，通过Cache中图片的地址返回给UIWebviewJS。将图片操作放在native端的好处是：1.可以进行本地缓存。下次进入本文时，可以直接从缓存中读取，提高响应速度，节省用户流量。2.您可以点击图片放大，图片保存到相册等操作。还有两个技术难点：1.如何在HTML文本onLoad的时候关闭自己的图片加载，转而从本地获取图片？2、如何将本机端下载的图片返回给网页？起初，我不知所措。翻了翻文档，只找到了一个-(NSString*)stringByEvaluatingJavaScriptFromString:(NSString*)script与JS简单交互的方法，但是失败了。直到在Github上看到WebViewJavascriptBridge，一个UIWebView/WebViews和JS交互的封装库。刚开始看样例的时候，我几乎不被各种回调搞糊涂。好记性不如烂笔头。我从不掩饰自己的愚蠢，所以我画了一张关系图。在放图之前，我们先看一下代码。一开始我们分别初始化了Native端和JS端：OC端：@propertyWebViewJavascriptBridge*bridge;对应的初始化代码如下，在初始化中直接包含了一个接收JS的回调：responseCallback(@"ResponseformessagefromObjC");}];JS端：（下面是固定的写法，你自己的JS文件必须包含下面的代码）functionconnectWebViewJavascriptBridge(callback){if(window.WebViewJavascriptBridge){callback(WebViewJavascriptBridge)}else{document.addEventListener('WebViewJavascriptBridgeReady',function(){callback(WebViewJavascriptBridge)},false)}}connectWebViewJavascriptBridge(function(bridge){bridge.init(function(message,responseCallback){log('JSgotamessage',message)vardata={'JavascriptResponds':'Wee!'}log('JSrespondingwith',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('ObjCcalledtestJavascriptHandlerwith',data)varresponseData={'JavascriptSays':'Rightbackatcha!'}log('JSrespondingwith',responseData)responseCallback(responseData)})了解了使用规则后，我们来看看在我们实际需求中应用的整体思路:-1-首先，我们要做的第一步是将获取到的HTML文本中的默认src替换掉，避免其自动加载图片。NSString*_content=[contentstringstringByReplacingOccurrencesOfString:@"src"withString:@"esrc"];——2——因为我们得到的只是HTML的body部分，需要自己编写完整的HTML。我们让《body onload="onLoaded()"》调用JS中的onLoaded()函数。在这个函数中，我们遍历所有img标签的esrc，保存为数组返回给OC端，让native端下载这些图片。functiononLoaded(){connectWebViewJavascriptBridge(函数(桥){varallImage=document.querySelectorAll("img");allImage=Array.prototype.slice.call(allImage,0);variimageUrlsArray=newArray();allImage.forEach(函数(图像){varesrc=image.getAttribute("esrc");varnewLength=imageUrlsArray.push(esrc);});bridge.send(imageUrlsArray);});}——3——bridge.send会触发初始化方法WebViewJavascriptBridge+(instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*??)webViewwebViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*??)webViewDelegatehandler:(WVJBHandler)handler;我们下载处理程序块中的所有图像。并将下载的图片在缓存中的地址返回给JS。#pragmamark--下载所有图片-(void)downloadAllImagesInNative:(NSArray*)imageUrls{SDWebImageManager*manager=[SDWebImageManagersharedManager];//初始化一个空元素数组_allImagesOfThisArticle=[NSMutableArrayarrayWithCapacity:imageUrls.count];//本地一个数组为保存所有图片for(NSUIntegeri=0;i
