iOS与JS交互总结

近几年来移动开发使用网页嵌入形式的越来越多，这就不可避免的出现原生控件和网页页面的JS交互，本篇就大概总结一下目前iOS开发中原生控件与JS的交互的几种形式。</br>

iOS开发中使用的是UIWebView控件来加载网页页面资源的。所以我们也就主要围绕这个控件来总结一下，大体上可以分为三种形式：

1、原生api交互，直接执行脚本，拦截代理
2、第三方库WebViewJavascriptBrige交互，实质还是拦截代理
3、JavaScriptCore框架
  3.1 context上下文,context上下文直接设置和调用
  3.2 JSExport协议,通过JSExport协议设置和调用

接下来就一个一个的来看看到底是如何实现的,大家也可以提前把demo下载下来，结合代码来看效果会更好哦。

原生api交互

使用原生API来实现交互，实际上主要用到一个函数和一个协议，
函数：

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

协议：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

1、 OBJC调用JS

直接使用UIWebView的函数执行JS代码，
比如我们JS代码中有一个函数objcCallJS,

function objcCallJS() {
        var data = 'ljt'
        alert('来自objc的调用，有返回值:' + data);
        return data
}

那我们该如何去调用呢？
直接在相应的地方如此调用即可：

NSString *returnStr = [self.homeWebView stringByEvaluatingJavaScriptFromString:@"objcCallJS()"];
    NSLog(@"返回值为:%@",returnStr);

我们注意到这个地方会有个返回值，此时如果我们调用的JS代码有返回值得话，就会赋值到returnStr这个变量，可供我们后续使用。如果JS代码没有返回值得话，这个值默认是Undefine。
OBJC调用JS代码就是如此的简单。这个时候，有人说了，如果我们想向JS代码中传值该怎么弄呢？
JS代码:

function objcCallJSParam(param1,param2) {
        alert('来自objc的调用，带有参数:' + param1 + '  ' + param2);
}

OBJC代码:

- (void)callJSBtnParamAction:(id)sender {
    NSLog(@"开始调用JS函数,带有参数");
    [self.homeWebView stringByEvaluatingJavaScriptFromString:@"objcCallJSParam('ljt','ths')"];
}

这样我们就可以向JS代码中传入参数了。

2、 JS调用OBJC

在这里我们使用拦截UIWebView的代码来实现，我们知道代理函数- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;会在UIwebView开始加载页面的时候调用，如果我们返回NO则这个页面什么也不做，如果返回YES则加载这个页面。有了这个特性，我们就可以来实现JS调用OBJC的代码。
</br>具体的流程： 页面响应时，重新设置页面的href,并将OBJC所用的参数以及所调用的指定函数，封装成一个特定格式的URL链接，然后我们在UIwebView的协议中拦截这个链接，然后解析出来，根据固定的格式做出相应的处理。
具体来说：当我们页面中一个事件，设置了页面的href,携带了两个参数，

//调用OBJC
function JSCallObjc() {
    window.location.href="www.baidu.com/param=ljt&ths";
}

我们在OBJC中可以这么做：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSLog(@"将要开始加载页面");
    NSString *urlStr = [[request URL] absoluteString];
    if ([urlStr containsString:@"param"]) {
        NSRange range = [urlStr rangeOfString:@"param="];
        NSString *paramStr = [urlStr substringFromIndex:range.location + range.length];
        NSLog(@"param=%@",paramStr);
        UIAlertController *alterVC = [UIAlertController alertControllerWithTitle:@"objc弹框" message:paramStr preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
        [alterVC addAction:okAction];
        [self presentViewController:alterVC animated:YES completion:nil];
        return NO;
    }
    return YES;
}

这样就实现了JS调用OBJC的效果，当然这个例子不是那么好，href的格式我是随便写写，当真正使用起来的时候需要事先设计好合理的封装方式。
</br></br>

第三方库WebViewJavascriptBrige交互

这个部分我们使用有名的第三方库WebViewJavascriptBrige来介绍一下，关于这个库的实现，网上已经有很多介绍，关于原理的实现就不多介绍了，直接进入使用环节，使用这个库的时候有一个地方需要注意一下，在所加载的页面中需要实现固定的写法：

//固定函数，必须这样写
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    //所有交互的函数都写在这里面
    setupWebViewJavascriptBridge(function(bridge) {
        ····
    })

1、 OBJC调用JS

首先我们需要在JS中注册一个函数，供OBJC来调用

bridge.registerHandler('objcCallJS', function(data, responseCallback) {
            myAlert(data)
            var responseData = { 'Javascript Says':'Right back atcha!' }
            responseCallback(responseData)
})

这样注册之后，我们就可以在OBJC代码中调用这个名为objcCallJS的函数了。

OBJC中的代码：

- (void)callJSBtnAction:(id)sender {
    NSLog(@"调用JS函数");
    //callHandler有几种形式
    //- (void)callHandler:(NSString *)handlerName 只调用函数
    //- (void)callHandler:(NSString *)handlerName data:(id)data 调用的同时携带数据
    //- (void)callHandler:(NSString *)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback 不但调用和携带数据，而且设置回调函数处理所需的数据(如果需要处理结果数据)
//    [self.bridge callHandler:@"objcCallJS" data:@{@"key":@"value"} responseCallback:^(id responseData){
//        NSLog(@"%@",responseData);
//    }];
//    [self.bridge callHandler:@"objcCallJS"];
    [self.bridge callHandler:@"objcCallJS" data:@{@"key":@"value"}];
    
}

这个地方有几处我们需要说明的地方
1、objcCallJS这个名称必须是一样的
2、OBJC中调用JS的函数是通过- (void)callHandler:(NSString*)handlerName data:(id)data;这个借口调用的，这个接口的最终调用实现是- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;，当我们调用的时候，<strong>handlerName</strong>对应JS代码中注册的函数名，<strong>data</strong>对应JS代码中的data，即为OBJC向JS中传入的参数，还有一个有意思的参数就是<strong>responseCallback</strong>，就是JS代码的responseCallback，也就是说，当我们的JS代码处理完成之后，OBJC还有一次机会可以对JS代码处理完成的逻辑进行处理。当然data和responseCallback这两个参数都不是必须的。

2、 JS调用OBJC

与OBJC调用JS的逻辑类似，

首先我们需要在OBJC中注册JS能够调用的函数：

//注册js调用函数，并设定回调。js中可以调用JSCallObjc的函数
    [self.bridge registerHandler:@"JSCallObjc" handler:^(id data, WVJBResponseCallback responseCallback){
        NSString *paramStr = [data objectForKey:@"key"];
        UIAlertController *alterVC = [UIAlertController alertControllerWithTitle:@"objc弹框" message:paramStr preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
        [alterVC addAction:okAction];
        [self presentViewController:alterVC animated:YES completion:nil];
        responseCallback(@"Response from testObjcCallback");
    }];

注册完成以后，我们就可以在JS代码中调用这个注册好的函数了：

//调用OBJC中的函数
        var callbackButton = document.getElementById('btn')
        callbackButton.onclick = function(e) {
            e.preventDefault()
                                 
            //callHandler的参数可变
            //bridge.callHandler('JSCallObjc') 没有携带数据
            //bridge.callHandler('JSCallObjc', {'key': 'value'}) 携带数据
            //bridge.callHandler('JSCallObjc', {'key': 'value'},function(response) {
            //      log('JS got response', response)
            //  }) 携带参数和回调函数
                   
            //bridge.callHandler('JSCallObjc')              
            bridge.callHandler('JSCallObjc',{'key': 'value'})
            
            
        }

我们可以看到，这个逻辑和接口与OBJC调用JS的逻辑和接口大同小异，具体的参数也是差不多的。
到此我们就可以利用这个第三方库来实现OBJC和JS的互相调用。其实这个库的内部还是通过拦截协议来实现这个交互过程的。

JavaScriptCore框架

JavaScriptCore框架是在iOS7之后引入的框架，这个框架在JS交互上为我们提供了很大帮助，可以在html界面上调用OC方法并传参，也可以在OC上调用JS方法并传参。关于JavaScriptCore的详细介绍和注意事项，请大家自行google之。这里我们只是简单介绍一下用法，很浅显，请大家不要见怪。
使用之前，我们需要导入JavaScriptCore.framework这个框架

context上下文,context上下文直接设置和调用

1、 OBJC调用JS

OBJC调用JS之前，需要获取一下JS的上下文，

self.context = [self.homeWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        NSLog(@"self.contex=%@",self.context);

获取到这个上下文之后，我们就可以对JS的执行环境做处理了，假如我们需要调用JS中已经实现过的函数，我们可以直接调用相应的函数就行：

- (void)callJSBtnAction:(id)sender {
    NSLog(@"开始调用JS函数,有返回值");
    //第一种
//    NSString *returnStr = [self.homeWebView stringByEvaluatingJavaScriptFromString:@"objcCallJS()"];
//    NSLog(@"返回值为:%@",returnStr);
    
    //第二种
//    NSString *js = @"objcCallJS()";
//    JSValue *value = [self.context evaluateScript:js];
//    NSLog(@"%@",[value toString]);
    
    //第三种
    JSValue *valueFuc = self.context[@"objcCallJS"];
    JSValue *value = [valueFuc callWithArguments:nil];
    NSLog(@"%@",[value toString]);
}

以上代码中我们展示了三种不同的调用方式，特别说明的是第三种，首先我们从上下文中获取要执行的函数，并把它保存在一个JSValue变量中JSValue *valueFuc = self.context[@"objcCallJS"];,然后对这个变量调用其函数- (JSValue *)callWithArguments:(NSArray *)arguments;传入参数。
我们可以在JS中这样使用：
因为我们传入的参数为nil，所以我们在JS中没有获取参数，代码demo中我们提供了获取参数的版本，具体的可以参照代码demo,

function objcCallJS() {
        var data = 'ljt'
        alert('来自objc的调用，有返回值:' + data);
        return data
 }

2、 JS调用OBJC

首先我们在OBJC中，增加JS可以执行的代码，怎么添加呢？还是需要用到上面所提到的上下文context。
加入我们需要实现一个可以接收参数的函数名为JSCallObjcParam,该怎么写呢？

//有参数
    __weak typeof(self) weakSelf = self;
    self.context[@"JSCallObjcParam"] = (id)^(NSString *param1, NSString *param2) {
        NSLog(@"有参，无返回值");
        NSString *message = [NSString stringWithFormat:@"%@:%@",param1,param2];
        UIAlertController *alterVC = [UIAlertController alertControllerWithTitle:@"objc弹框" message:message preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
        [alterVC addAction:okAction];
        [weakSelf presentViewController:alterVC animated:YES completion:nil];
    };

这样我们就实现了一个可以在JS中调用的函数JSCallObjcParam,这个函数就收两个参数。
我们在JS中这样调用：

//调用OBJC
    function callObjcParam(param1,param2) {
        var data = JSCallObjcParam('ljt','ths')
        alert('来自objc(callObjcParam)的返回值:' + data);
    }

这么两步我们就实现了iOS和JS的相互调用。</br>
demo中我们分别实现了相互调用的传参和不传参，有返回值和没有返回值的情况，具体的可以看demo代码。

JSExport协议,通过JSExport协议设置和调用

JSExport是一个协议，我们可以自定义一个协议，继承此协议，在协议中声明可以在JS中使用的API函数。

首先我们实现一个这么样的协议ObjcJSDelegate

@protocol ObjcJSDelegate <JSExport>

//有参数
- (void)JSCallObjcParam:(NSString *)param1 with:(NSString *)param2;
//无参数
- (void)JSCallObjc;  
//有返回值
- (NSString *)JSCallObjcReturn;
@end

<strong>在这里我们需要知道的是，这个协议中所声明的接口是供JS调用的，也就是说JS代码调用OBJC的相关接口，可以放在这个协议中。而OBJC调用JS还是通过上下文来直接调用的</strong>

其次，我们需要一个实现了这个代理的类，我们就直接实现在@interface JSExportViewController ()<ObjcJSDelegate>UIWebView所在的ViewController中：

#pragma mark ObjcJSDelegate

- (void)JSCallObjcParam:(NSString *)param1 with:(NSString *)param2 {
    NSLog(@"有参，无返回值");
    NSString *message = [NSString stringWithFormat:@"%@:%@",param1,param2];
    UIAlertController *alterVC = [UIAlertController alertControllerWithTitle:@"objc弹框" message:message preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
    [alterVC addAction:okAction];
    [self presentViewController:alterVC animated:YES completion:nil];
}

- (void)JSCallObjc {
    NSLog(@"无参，无返回值");
}

- (NSString *)JSCallObjcReturn {
    NSLog(@"无参，有返回值");
    return @"ljt";
}

然后我们需要让JS知道如何调用我们所需要的函数，这个时候同样需要前面一直提到的上下文：

self.context[@"OBJCFuc"] = self;

如此，我们就可以在JS中通过OBJCFuc(OBJCFuc.接口名字)来调用我们之前协议实现的相关接口了：
JS调用

//调用OBJC
    function callObjcParam(param1,param2) {
        var data = OBJCFuc.JSCallObjcParamWith('ljt','ths')
        alert('来自objc(callObjcParam)的返回值:' + data);
    }
    function callObjc() {
        var data = OBJCFuc.JSCallObjc()
        alert('来自objc(callObjc)的返回值:' + data);
    }
    
    function callObjcReturn() {
        var data = OBJCFuc.JSCallObjcReturn()
        alert('来自objc(callObjcReturn)的返回值:' + data);
    }

这样就实现了JS调用OJBC。

这篇文章，只是简单的介绍了iOS和JS的交互的几种方法，很粗浅，很简单，但也许很实用，最后附上代码demo