正在开发的APP中一个特殊的需求,需要在APP内嵌的webview中使用js调用一些原生的方法。通过对javascript的分析,发现能够很好的解决这个问题,但是也发现了一些坑,与大家分享。
1.定义接口
通过protocol实现,这一步大家都很清楚,告诉js那边我有哪些接口。关键是JSExport,这个是我们接口必须遵循的协议,只有遵循这个协议,才能将方法争取的注射到webview中。
@protocol WebViewBridgeDelegate
- (void)showURL:(NSString *)url;
- (NSString*)callDK:(NSString*)func function:(NSString*)param;
@end
使用中发现,这些方法好像不能使用optional,没有进行严格的验证。
2.实现接口
只需要实现WebViewBridgeDelegate中的这些方法就可以了。
#import
#import "WebViewBridgeDelegate.h"
@interface AppJSNative : NSObject
@property (nonatomic, weak) UINavigationController *navigationController;
@end
@implementation LoldkJSNative
- (void)showURL:(NSString *)url
{
NSLog(@"showURL:%@", url);
[JumpHandler jumpToURI:url navigationController:self.navigationController];
}
- (NSString*)callDK:(NSString*)func function:(NSString*)param
{
NSLog(@"%@", func);
if ([func isEqualToString:@"getToken"])
{
NSString *token =xxx;
NSMutableDictionary *result = [[NSMutableDictionary alloc]init];
if (!IsStrEmpty(token))
{
[result setObject:token forKey:@"token"];
[result setObject:@(YES) forKey:@"result"];
}
else
{
[result setObject:@(NO) forKey:@"result"];
}
NSLog(@"%@", token);
return [result JSONString];
}
NSMutableDictionary *result1 = [[NSMutableDictionary alloc]init];
[result1 setObject:@(NO) forKey:@"result"];
return [result1 JSONString];
}
@end
其中主要是实现了一些原生页面跳转的功能,以及获取原生数据的的方法。
3. 注射到webview
- (void)webViewDidStartLoad:(UIWebView *)webView
{
self.jsContext = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
AppJSNative *jsNative = [[AppJSNative alloc]init];
jsNative.navigationController = self.navigationController;
self.jsContext[@"iOS"] = jsNative;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
context.exception = exception;
NSLog(@"jsContext错误:%@",exception);
};
}
为什么我要在webViewDidStartLoad中进行注射而不是webViewDidEndLoad中。因为在js加载的时候就会调用原生方法,在webViewDidEndLoad中注射会导致JS找不到对应的方法。
保存navigationController是为了方便进行页面跳转。
4. JSContext生成时机的问题
根据上一步的确能够处理大部分问题,但是在实际使用过程中发现,在windows.onload函数中调用的时候,发现原生的接口不存在。根据分析发现是因为JSContext对象只会在onload函数之后才能获取到。此处我们需要自己找到一种方法,能够在正确的时机(越早越好)获取到JSContext对象。
基本原理是这样的:WebKit用WebFrameLoadDelegate回调与客户端进行通讯就好像UIWebView传达页面加载事件通过他自己的UIWebViewDelegate。WebFrameLoadDelegate其中一个方法是webView:didCreateJavaScriptContext:forFrame:就像所有事件源,WebKit的代码去检测他的代理是否实现了回调方法,如果实现了就调用此方法。
证实在iOS,UIWebView内,不论任何对象实现WebKit的WebFrameLoadDelegate方法,并不是真的实现webView:didCreateJavaScriptContext:forFrame:所以WebKit从不会调用此方法。如果此方法存在于代理对象中,它将会被自动调用。
既然如此,在OC中有很多的办法给现有的类和对象动态的增添一个方法。最简单的办法就是通过扩展。我给已有的类NSObject添加一个扩展去实现webView:didCreateJavaScriptContext:forFrame:方法。
的确,添加这个方法让WebKit开始调用它,因为任何对象(包括UIWebView中的一些sink object)都继承自NSObject,现在都实现了webView:didCreateJavaScriptContext:forFrame:这个方法。如果未来UIWebView内部的sink object实现了这个代理方法,那么这个途径就是失效因为我们自己实现的分类永远不会被调用。
当我们的方法被WebKit调用的时候会传给我们一个WebKit中的WebView(不是UIWebView),一个JavaScriptCore的JSContext对象和WebKit的WebFrame。因为没有一个公开的WebKit框架的头文件提供给我们,所以WebView和WebFrame对我们来说非常透明。但是JSContext正是我们寻找的,通过JavaScriptCore框架对我们来说完全是适用的。(在实际中,我最终在WebFrame中调用方法,作为一个最佳状态)
问题现在就变成怎样根据JSContext反找到对应的UIWebView。首先我尝试使用WebView对象我们控制和沿着继承的view去找到他拥有的UIWebView.但是后来证明这个对象是一些UIView的代理,并不是一个真正的UIView。并且因为他对我们来说是透明的,我也没有打算使用它。
我的解决方案是迭代所有在app中所创建的UIWebViews(参考代码,我是怎么样做的)并且使用stringByEvaluatingJavaScriptFromString:去储存一个token"cookie"在JavaScriptContext中,然后我在JSContext中查找已经存在的这个token,如果他存在这个UIWebView就是我所要找的。
一旦我们有了JSContext我们就可以做一些很有趣的事情。我的测试App展示了我们怎样映射ObjectiveC的blocks和对象到全局命名空间并且通过JavaScript访问和调用它们。
5. JS调用
window.iOS. showURL("app://user?id=1");
var token = window.iOS. callDKFunction("token");
特别注意的是第二个方法,我们OC中实现的方法叫callDK, 但是由于多参数的问题,在JS中对应的方法名不再是callDK,而是将后面的参数的名字加在了函数名后面组成了新的函数名callDKFunction,这个地方耗费了我很久的时间。
6. 回调
我们也是可以在js中传入函数当做参数的,在OC中可以调用
- (void)processRequestWithData:(NSDictionary *)diconary callback:(JSValue *)value{
NSLog(@"%@",diconary);
NSMutableArray *array = [NSMutableArray array];
[array addObject:[NSArray arrayWithObjects:@{@"key1":@"value1"},@{@"key2":@"value2"},nil]];
[value callWithArguments:array];
}
其中value就是js传入的一个回调函数。
总结
以上这些例子,包含了原生页面调用、直接return值、回调。已经涵盖了绝大部分我们想通过js调用原生的场景。十分的方便。