JS与OC原生方法互相调用

本文将通过JavaScriptCore提供的方法,实现JS调用OC原生方法和OC中调用JS方法等

1.导入JavaScriptCore

#import <JavaScriptCore/JavaScriptCore.h>

2.定义全局的JSContext对象

@property(nonatomic,strong) JSContext *jsContext;

3.获取webview的上下文

在页面加载完成时，获取webview的上下文 ，并将对象注入js内

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    //获取webview的上下文
    self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //将对象注入js内,在JS中便可使用"ocObject"来调用oc的方法了
    self.jsContext[@"ocObject"] = self;
}

4.定义与js交互的协议

只有在这个协议中声明并实现的方法,才能够在js中调用

// JSExport 定义与js交互的协议
@protocol JSExportDelagte <JSExport>
-(void)ocFunction:(NSString *)string;
@end

#pragma -mark JSExportDelagte
-(void)ocFunction:(NSString *)string{
    UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"提示" message:string delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
    [av show];
}

5.js可以调用OC的原生方法了

//js
<script type="text/javascript">
     function fun1() {
            var string = "oc方法调用成功";
            //调用oc的方法
            ocObject.ocFunction(string);
     }
</script>

6.OC调用js方法

通过JSValue获取js方法并调用

//js
<script type="text/javascript">
     //被oc调用的js方法
     var jsFunction = function(){
         alert('js方法调用成功');
     } 
</script>

//oc
-(void)ocCallJSFunction{
    //在oc中调用js方法
    JSValue *jsValue = self.jsContext[@"jsFunction"];
    [jsValue callWithArguments:nil];
}

7.通过block可以传递多个参数

//oc
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    //在页面加载完成时，获取webview的上下文 ，并将对象注入js内
    self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    //使用block 可以实现多个参数传递(由js传递到oc)
    self.jsContext[@"ocBlock"] = ^(NSString *name,NSString *age) {
        NSString *info = [NSString stringWithFormat:@"我的名字叫做:%@,今年%@岁了!",name,age];
        UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"提示" message:info delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
        [av show];
    };
}

//js
<script type="text/javascript">
     function fun3() {
          ocBlock('小明','7');
     } 
</script>

Demo代码

ViewController.m

#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>

// JSExport 定义与js交互的协议
@protocol JSExportDelagte <JSExport>
-(void)ocFunction:(NSString *)string;
-(void)ocCallJSFunction;
@end

@interface ViewController ()<UIWebViewDelegate,JSExportDelagte>
@property(nonatomic,strong) UIWebView *webView;
@property(nonatomic,strong) JSContext *jsContext;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:self.webView];
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    self.webView.delegate = self;
    [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    
    //在页面加载完成时，获取webview的上下文 ，并将对象注入js内
    self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //在js中,便可使用ocObject来调用oc中的方法了
    self.jsContext[@"ocObject"] = self;
    
    //使用block 可以实现多个参数传递(由js传递到oc)
    self.jsContext[@"ocBlock"] = ^(NSString *name,NSString *age) {
        NSString *info = [NSString stringWithFormat:@"我的名字叫做:%@,今年%@岁了!",name,age];
        UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"提示" message:info delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
        [av show];
    };
}

#pragma -mark JSExportDelagte
-(void)ocFunction:(NSString *)string{
    UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"提示" message:string delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
    [av show];
}
-(void)ocCallJSFunction{
    //在oc中调用js方法
    JSValue *jsValue = self.jsContext[@"jsFunction"];
    [jsValue callWithArguments:nil];
}

-(void)sumA:(int)a andB:(int)b{
    NSString *s = [NSString stringWithFormat:@"%d+%d=%d",a,b,a+b];
    UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"计算结果" message:s delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
    [av show];
}

@end

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>index</title>
            <script type="text/javascript">
                function fun1() {
                    var string = "oc方法调用成功";
                    //调用oc的方法
                    ocObject.ocFunction(string);
                    
                }
                function fun2() {
                    ocObject.ocCallJSFunction();
                }
                function fun3() {
                    ocBlock('小明','7');
                }
                //被oc调用的js方法
                var jsFunction = function(){
                    alert('js方法调用成功');
                }
            </script>
            <script type="text/javascript" src="javaScript.js"></script>
            <style type="text/css">
                .box{
                    margin-left: 40px;
                    width: 300px;
                    height: 100px;
                    background-color: deeppink;
                    padding-top: 10px;
                    padding-left: 10px;
                    padding-right: 10px;
                    padding-bottom: 10px;
                }
            #div1{
                margin-top: 100px;
            }
            #div2{
                margin-top: 0px;
            }
            #div3{
                margin-top: 0px;
            }
            
                </style>
    </head>
    <body>
        <div id="div1" class="box">
            <input type="button" style="width: 300px;height: 100px;background-color: yellow" value="js调用oc方法" onclick="fun1()"/>
        </div>
        <div id="div2" class="box">
            <input type="button" style="width: 300px;height: 100px;background-color: yellow" value="oc调用js方法" onclick="fun2()"/>
        </div>
        <div id="div3" class="box">
            <input type="button" style="width: 300px;height: 100px;background-color: yellow" value="通过oc代码块实现js传递多个参数到oc方法中" onclick="fun3()"/>
        </div>
    </body>
</html>