iOS Object-C 与JavaScript的相互调用详解

摘要：

本文主要讲的是iOS的OC代码和网页的交互，有两种方法可以实现，其中包括：

1. 用第三方控件WebViewJavascriptBridge

2. 用iOS原生的stringByEvaluatingJavaScriptFromString

1.用第三方控件WebViewJavascriptBridge

a. 初始化，将webview与WebViewJavascriptBridge关联：

    [WebViewJavascriptBridge enableLogging];
    
    _bridge = [WebViewJavascriptBridge
               bridgeForWebView:webView
               webViewDelegate:self
               handler:^(id data, WVJBResponseCallback responseCallback) {
                   NSLog(@"ObjC received message from JS: %@", data);
                   responseCallback(@"Response for message from ObjC");
               }];

此时你的webview就与js搭上桥了。下面就是方法的互调和参数的互传.

b.JavaScript调用oc：

[_bridge registerHandler:@"showTabbar" handler:^(id data, WVJBResponseCallback responseCallback) {
        [weakSelf showTabbar];
    }];

这样，JavaScript就可以调用oc的showTabbar方法了。这里注意showTabbar这个方法的标示。JavaScript那边的命名要跟ios这边相同，才能调到这个方法。当然这个名字可以两边商量着自定义。

c.oc调用JavaScript：

NSDictionary *data = @{@"classId":@(self.selectedClassId), @"imgUrl":destiniationPath};
    [_bridge callHandler:@"updateClassImage" data:data responseCallback:^(id response) {
        NSLog(@"updateClassImage responded: %@", response);
    }];

这里的 updateClassImage 也是个方法标示。

在这个方法中，通过data可以传值，通过 response可以接受js那边的返回值。代码中就是传递给网页一个本地图片的地址，这样就可以实现把本地图片传递给网页。如果直接传图片数据的话，可以先进行base64编码，然后用data传递给网页。

2. 用iOS自带的方法

a. JavaScript调用oc：

使用javascriptCore.framework，当然，工程中要先添加好这个框架。然后在你要使用这个框架的类中include

#import <JavaScriptCore/JavaScriptCore.h>

JSContext *context = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"log"] = ^() {
        NSArray *args = [JSContext currentArguments];
        for (JSValue *jsVal in args) {
            NSLog(@"%@", jsVal);
        }
        JSValue *this = [JSContext currentThis];
        NSLog(@"this: %@",this);
    };

JSContext *context = [self.webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

获取该UIWebview的javascript执行环境。

根究以上情形，在block中执行oc中的代码和方法。

b.oc调用JavaScript：

so easy

[webView stringByEvaluatingJavaScriptFromString:@"javascript:JSFunc()"];

这就调用了JavaScript的JSFunc()函数。