UIWebView与JS的深度交互.docx

UIWebView与JS的深度交互事情的起因还是因为项目需求驱动。折腾了两天，由于之前没有UIWebView与JS交互的经历，并且觉得这次在功能上有一定的创造性，特此留下一点文字，方便日后回顾。我要实现这样一个需求：按照本地的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(respon