正在开发的APP中一个特殊的需求，需要在APP内嵌的webview中使用js调用一些原生的方法。通过对javascript的分析，发现能够很好的解决这个问题，但是也发现了一些坑，与大家分享。

1.定义接口

通过protocol实现，这一步大家都很清楚，告诉js那边我有哪些接口。关键是JSExport，这个是我们接口必须遵循的协议，只有遵循这个协议，才能将方法争取的注射到webview中。

@protocol WebViewBridgeDelegate <JSExport>

- (void)showURL:(NSString *)url;

- (NSString*)callDK:(NSString*)func function:(NSString*)param;

@end

使用中发现，这些方法好像不能使用optional，没有进行严格的验证。

2.实现接口

只需要实现WebViewBridgeDelegate中的这些方法就可以了。

#import <UIKit/UIKit.h>
#import "WebViewBridgeDelegate.h"

@interface AppJSNative : NSObject<WebViewBridgeDelegate>

@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调用原生的场景。十分的方便。