本篇文章的示例代码可以在我的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 对象的方法。
经过搜索之后，发现两种比较通用的方法：
- 使用 KVC
- 使用 Category
本篇会使用一个示例来进行演示，代码中只用到了第二种方法，因为个人觉得第二种方法比较方便。
使用 KVC
使用这个方法很简单，简单到一句代码就可以描述清楚：
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。
网友评论