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()函数。