公司项目大量使用 WebView,交互相当频繁,基于所以对WebView与 JS 的交互做了些封装
SFWebViewBridge封装JavaScriptCore.framework框架进行JS与OC的交互。
- 首先看看具体如何使用,原理下文再做介绍
- 1.通过 webView创建桥接
// 通过 webview 创建bridge ,并设置当前控制器为代理, SFWebViewBridge * bridge = [SFWebViewBridge bridgeWithWebView:_webView delegate:self];- 2.注册方法供 JS 调用
// 注册printHelloWorld方法供 JS 调用 [self.bridge registerHandler:@"printHelloWorld" completion:^(id data) { NSLog(@"XCode 控制台输出printHelloWorld--> %@",data); }]; // 注意循环引用 __weak typeof(self) wsf = self; // 注册javaScriptBridgeToOC方法 [self.bridge registerHandler:@"javaScriptBridgeToOC" completion:^(id data) { // 调用实际功能 [wsf dealWithData:data]; }];- 3.调用 JS 方法
// 调用不带参数 JS 方法 [self.bridge callHandler:@"test1"]; // 调用带参数 JS 方法,建议方法参数使用NSDictionary NSArray NSString等,不支持自定义类 NSDictionary * data = @{@"name":@"Cai", @"age":@"20"}; [self.bridge callHandler:@"test2" parameter:data];
以上为具体使用方式,以下为源码分析
- SFWebViewBridge对外提供以下4个接口
// 快速创建 bridge
+ (instancetype)bridgeWithWebView:(UIWebView *)webView delegate:(id<UIWebViewDelegate>)delegate;
// 调用无参数 JS 方法
- (void)callHandler:(NSString*)handlerName;
// 调用带参数 JS 方法
- (void)callHandler:(NSString*)handlerName parameter:(id)parameter;
// 注册方法供 JS 调用,completion: 完成回调
- (void)registerHandler:(NSString*)handlerName completion:(void(^)(id data))completion;
- 接口1:创建桥,并设置为webView的代理,设置delegate属性
+ (instancetype)bridgeWithWebView:(UIWebView *)webView delegate:(id)delegate;
{
// 创建桥
SFWebViewBridge * bridge = [[SFWebViewBridge alloc] init];
// 设置为webView的代理
webView.delegate = bridge;
// 设置bridge的代理
bridge.delegate = delegate;
return bridge;
}
- 接口2:实际调用接口3故此不做说明
- 接口3:方法中判断传递进来的参数类型,如果是字符串直接拼接方法名与参数调用使用 context 执行 JS, 如果是NSArray, NSDictionary就转化为 Json 字符串
- (void)callHandler:(NSString*)handlerName parameter:(id)parameter
{
if (parameter != nil)
{
NSBundle *mainB = [NSBundle bundleForClass:[parameter class]];
// 参数类型不能为自定义类型
NSAssert(mainB != [NSBundle mainBundle], @"请使用合法的参数类型");
return;
}
else
{
// 执行 JS
[self.context evaluateScript:[NSString stringWithFormat:@"%@()",handlerName]];
}
NSString * jsonString = nil;
// 将参数转为字符串
if ([parameter isKindOfClass:[NSArray class]] | [parameter isKindOfClass:[NSDictionary class]])
{
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:parameter options:NSJSONWritingPrettyPrinted error:nil];
jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
}
else if ([parameter isKindOfClass:[NSString class]])
{
jsonString = parameter;
}
else
{
jsonString= [NSString stringWithFormat:@"%@",parameter];
}
// 拼接JS方法名与参数
NSString * StringParameter = [NSString stringWithFormat:@"%@(%@)",handlerName,jsonString];
// 执行 JS
[self.context evaluateScript:StringParameter];
}
- 接口4:将所有注册的handlerName与completion回调通过 key-value 的形式保存下来,并在 webView的代理方法webViewDidFinishLoad中进行注册
- (void)registerHandler:(NSString*)handlerName completion:(void (^)(id))completion
{
self.messageHandlers[handlerName] = ^(id data) {
// 回到主线程调用
dispatch_async(dispatch_get_main_queue(), ^{
completion(data);
});
};
}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// 获取 JSContext并赋值
_context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 添加所有注册的handler
if (self.messageHandlers.count != 0)
{
__weak typeof(self) weakself = self;
[self.messageHandlers enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
weakself.context[key] = obj;
}];
}
if (_delegate && [_delegate respondsToSelector:@selector(webViewDidFinishLoad:)])
{
[_delegate webViewDidFinishLoad:webView];
}
}
可以点击这里下载DEMO查看
