5分钟学会 JavaScript / iOS 互相调用

真的只需要5分钟，现在开始计时！

第1分钟

首先澄清一下标题：

• 标题中的JavaScript指：在html页面中嵌入的JS函数；
• 标题中的iOS指：在iOS App原生代码中编写的代码；

然后，了解一点基础知识，请记住以下两点：

• JSContext 这个对象是实现 JS 调用 iOS 的关键对象；
• JSContext 需要结合UIWebView使用，所以这篇教程仅包括使用UIWebView的场景；

第2分钟

记住以下两个相互调用方法：

• JS 调用 iOS
  JSContext是实现JS调用OC的关键；

    JSContext *content = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    content[@"call_iOS"] = ^() {
        //在JS的函数中调用native中的call_iOS（虚拟出来的方法），在这里回调；重点看下js中的调用call_iOS的写法
    };

• iOS调用JS
  UIWebView的stringByEvaluatingJavaScriptFromString方法是实现iOS调用JS的关键，下面的例子将调用JS中的showTitleMessage方法，并传入一个参数

NSString *functionString = [NSString stringWithFormat:@"showTitleMessage('%@')",@"oc调用了js的内容"];
[self.webView stringByEvaluatingJavaScriptFromString:functionString];

第3分钟开始

Show Me The Code, 请用3分钟的时间阅读代码，理解一下；

test_1.html

    
        
        
        
    
    
    
    
    
        
下面是网页


        点击按钮js调用oc
        





        点击调用原生代码并传递参数
   

ViewController.m

#import "ViewController.h"
#import 



@interface ViewController ()

@property (nonatomic) UIWebView *webView;
@property (nonnull,strong) UIButton *btn;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self makeWeb];
}


-(void)makeWeb
{
    self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    self.webView.backgroundColor = [UIColor whiteColor];
    self.webView.delegate = self;
    
    [self.view addSubview:self.webView];

    
    NSString *webPath = [[NSBundle mainBundle] pathForResource:@"test_1" ofType:@"html"];
    NSURL *webURL = [NSURL fileURLWithPath:webPath];
    NSURLRequest *URLRequest = [[NSURLRequest alloc] initWithURL:webURL];
    [self.webView loadRequest:URLRequest];
    
    
    /**
     JS调用native
     */
    JSContext *content = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    content[@"call_iOS"] = ^() {
        NSLog(@"js调用oc---------begin--------");
        NSArray *thisArr = [JSContext currentArguments];
        for (JSValue *jsValue in thisArr) {
            NSLog(@"=======%@",jsValue);
        }
        //JSValue *this = [JSContext currentThis];
        //NSLog(@"this: %@",this);
        NSLog(@"js调用oc---------The End-------");
    };
    content.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        //比如把js中的方法名改掉，OC找不到相应方法，这里就会打印异常信息
        NSLog(@"异常信息：%@", exceptionValue);
    };
    
    
    
    content[@"test"] =^(id obj ,id obj1,id obj2){
        //obj,obj1,obj2 这3个参数可以不写，也可以继续写obj3,obj4....
        NSArray *thisArr = [JSContext currentArguments];
        for (JSValue *jsValue in thisArr) {
            NSLog(@"=======%@",jsValue);
        }
        
    };
    
    /**
     native 调用 JS
     */
    
    UIButton *buttonCallJs = [UIButton buttonWithType:UIButtonTypeCustom];
    buttonCallJs.frame = CGRectMake(10, self.view.bounds.size.height - 100,self.view.bounds.size.width-20, 40);
    buttonCallJs.backgroundColor = [UIColor blackColor];
    [buttonCallJs setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [buttonCallJs setTitle:@"native调用JS" forState:UIControlStateNormal];
    [buttonCallJs addTarget:self action:@selector(callJS:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:buttonCallJs];
    
}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/**
 navtive 调用 js的方法；
 showTitleMessage 是js中的方法名称；
 */
- (void)callJS:(id)sender{
    NSString *functionString = [NSString stringWithFormat:@"showTitleMessage('%@')",@"oc调用了js的内容"];
   [self.webView stringByEvaluatingJavaScriptFromString:functionString];
}

@end

后记：WKWebView 是新一代的WebView,实现JS/iOS互相调用的方式与在UIWebView中的方式有所区别，注意区别；