本篇文章的示例代码可以在 我的Github 上进行下载。
在上一篇文章中我们讨论了 JavaScriptCore 的基本使用,如何在脱离 UIWebView 的情况下让 JavaScript 与原生进行交互。
但是,在混合开发过程中,我们需要的是让原生应用能与 UIWebView 进行流畅的交互。就如上一篇文章讲到的,从 iOS 2 以来,我们与 UIWebView 进行交互的唯一方式就是使用 stringByEvaluatingJavaScriptFromString: 方法拦截请求,像在 Github 上很火的 WebViewJavascriptBridge 就是使用这一原理来实现的。不幸的是,这一现状在 iOS 7 以后并没有改变,虽然苹果公司在 iOS 7 之后推出了 JavaScriptCore 这个新工具,但是官方并没有提供获取 UIWebView 的 JSContext 方法。
使用 JavaScriptCore 与 UIWebView 结合进行混合开发,这个需求是如此地合理,以致于我相信不会只有我一个人有这种想法。果然,互联网上牛人多,直接使用 Google 一搜,果然让我找到别人提供的两种解决方案。
注意:本篇文章所描述的方法并非是苹果官方提供的——可能甚至是他们所不赞成的,这些方法在文章写作的时候还是可以使用的,但是不保证之后会一直好用,请留意。
在我们需要使用 JavaScript 与原生进行交互的时候,需要一个 JSContext 实例。当我们使用 JavaScript 代码开发自己的功能的时候,我们可以手动创建 JSContext。
而每个 UIWebView 实例当中都拥有自己的 JSContext 对象,当我们要与 UIWebView 进行交互的时候,第一步就是要获取它们的 JSContext 对象。但是,苹果官方并没有提供获取 UIWebView 中的 JSContext 对象的方法。
经过搜索之后,发现两种比较通用的方法:
本篇会使用 一个示例 来进行演示,代码中只用到了第二种方法,因为个人觉得第二种方法比较方便。
使用这个方法很简单,简单到一句代码就可以描述清楚:
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
只要我们能拿到 UIWebView 的实例,然后就可以直接使用 KVC 的方法来获取它的 JSContext 对象,就这么简单。
第二种方法就是为 NSObject 添加一个分类,并使用这个分类来实现 WebKit 的 didCreateJavaScriptContext
回调,这种方法的具体描述可以参考 https://github.com/TomSwift/UIWebView-TS_JavaScriptContext
。
具体实现代码如下:
@implementation NSObject(JSContextTracker) + (NSMapTable *)JSContextTrackerMap { static NSMapTable *contextTracker; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ contextTracker = [NSMapTable strongToWeakObjectsMapTable]; }); return contextTracker; } - (void)webView:(id)unused didCreateJavaScriptContext:(JSContext *)ctx forFrame:(id)alsoUnused { NSAssert([ctx isKindOfClass:[JSContext class]], @"bad context"); if (!ctx) return; NSMapTable *map = [NSObject JSContextTrackerMap]; static long contexts = 0; NSString *contextKey = [NSString stringWithFormat:@"jsctx_%@", @(contexts++)]; [map setObject:ctx forKey:contextKey]; ctx[@"JSContextTrackerMapKey"] = contextKey; // store the key to the map in the context itself } + (JSContext *)contextForWebView:(UIWebView *)webView { // this will trigger didCreateJavaScriptContext if it hasn't already been called NSString *contextKey = [webView stringByEvaluatingJavaScriptFromString:@"JSContextTrackerMapKey"]; JSContext *ctx = [[NSObject JSContextTrackerMap] objectForKey:contextKey]; return ctx; } @end
在项目中增加这个分类之后,以后要获取 UIWebView 的 JSContext 对象,只需要使用 [NSObject contextForWebView:myWebView]
就可以了。
示例代码是一个联系人列表,项目里有一个 html 文件,显示了一个添加用户的表单,在点击提交之后,将新联系人添加到本地的数组中,并在 UITableView 中显示出来。
同时,代码里面还演示了上一篇文章中讨论过的使用 JavaScript 代码调用原生的方法。
核心代码在 XGAddContactWebViewController
文件中,这个控制器里面有一个 UIWebView 实例,在 viewDidLoad
方法中获取了 JSContext 对象:
self.jsContext = [NSObject contextForWebView:self.webView];
然后,在 - (void)webViewDidFinishLoad:(UIWebView *)webView
回调中,使用这个 JSContext 来调用原生的方法:
- (void)webViewDidFinishLoad:(UIWebView *)webView { [self.loadingView stopAnimating]; [self.jsContext setExceptionHandler:^(JSContext *context, JSValue *value) { NSLog(@"WEB JS: %@", value); }]; self.jsContext[@"myStore"] = self.store; self.jsContext[@"XGContact"] = [XGContact class]; NSString *jsPath = [[NSBundle mainBundle] pathForResource:@"add_a_contact" ofType:@"js"]; NSString *jsCode = [NSString stringWithContentsOfFile:jsPath encoding:NSUTF8StringEncoding error:nil]; [self.jsContext evaluateScript:jsCode]; }
完成的示例代码请参考 我的Github 。