iOS OC与JS 相互调用

2017-02-17 本文已影响195人 45b645c5912e

OC调用JS

首先我们创建一个WebView,加载一个本地的HTML文件

//加载web  本地的一个html文件
    NSURL * url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest * request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];

在webview加载完成时-(void)webViewDidFinishLoad:(UIWebView *)webView，我们调用html文件中的头部标题设置为导航控制器的title

    NSString * title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    self.title = title;

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;这个方法就是我们在OC中调用JS的核心方法，我们只需要把写好的js以字符串的形式传入webview就可以执行document.title这段语法，这段语法返回的标题就会通过这个方法的返回值返回给我们
一个简单的小例子，html文件中有一个test的js方法，同样在webview加载完成时我们以同样的方法将test()传入给webview，webview就会执行这个test方法
html中的代码

<script>
        function test(){
        
                alert("ceshi");
          }
 </script>

OC 中的代码

   [webView stringByEvaluatingJavaScriptFromString:@"test();"];

效果就是在加载完成时弹出一个我们前端开发最常见的alert弹框

JS调用OC

在JS中调用OC中的方法比较蛋疼，在webView中我们可以通过代理方法捕捉网页的去向，也就是a标签的href属性，或者网页的location.href.
我们自定义一个我们自己的协议，例如location.href = 'heihei://ceshi';当我们点击js中的一个按钮时onclick="ceshi();"执行location.href的跳转，这样我们在OC中就可以捕捉到request.URL.absoluteString;这个跳转的url
当我们捕捉到这个url只需要判断下是否是我们自定的协议，如果是我们这个heihei://协议，就根据url执行OC中相应的方法，即我们获得到了heihei://ceshi,我们就应该执行OC中名字为ceshi的方法，我们可以根据字符串截取到ceshi，然后利用方法响应器- (id)performSelector:(SEL)aSelector;来调用-(void)ceshi{}
在来说一下传参数的调用，在OC中的方法名带有参数是以：的方式拼接的，然而在js中:是无法存在于方法名中的，在这里，我们用_来代替，并且通过?拼接参数，参数与参数之间以&隔开，例如一个参数就是这样heihei://ceshi_?100，两个参数就是这样heihei://ceshi_number2_?100&200,依次类推。
这样我们开始在OC中对捕捉到url进行处理，首先截掉前面我们自定义的协议，然后以?分割，第一部分就是ceshi_number2_。
然后我们用:替换_就变成了ceshi:number2:这就获得到了OC中- (void)ceshi:(NSString *)number1 number2:(NSString *)number2{的方法名，仔细比对下哦，看看有没有问题哦！
下一步我们处理参数，刚才以？分割的字符串的后半部分为100&200这就是我们需要的参数，我们将这个字符串以&分割成数组，就获取到了我们的参数数组
最后通过同样的方式,方法选择器通过方法名来调用方法

-(id)performSelector:(SEL)aSelector withObject:(id)object;
-(id)performSelector:(SEL)aSelector withObject:(id)object1 withObject:(id)object2;

但是我们找遍了苹果performSelector方法也就只找到了上面三种，那么现在问题来了，如果传三个参数，或者四个参数，我们应该如何处理呢。显然，这样是有局限性的。
所以我们要模仿苹果自己写一个performSelector方法，写一个比较通用的，可以多传参数的方法，这里我们就用到了NSInvocation这个类，这是一个利用一个NSInvocation对象包装一次方法调用（方法调用者、方法名、方法参数、方法返回值）
我们自己封装了一个- (id)performSelect:(SEL)selector withObjects:(NSArray *)objects通过传参数的方法选择器和参数数组调用方法的方式，代码如下

-(id)performSelect:(SEL)selector withObjects:(NSArray *)objects{
    //方法签名（方法描述）
    NSMethodSignature * signature = [self methodSignatureForSelector:selector];
    if (signature == nil) {
        //找不到该方法抛出异常
        @throw [NSException exceptionWithName:@"牛逼的错误" reason:@"方法找不到" userInfo:nil];
    }
    // NSInvocation : 利用一个NSInvocation对象包装一次方法调用（方法调用者、方法名、方法参数、方法返回值）
    NSInvocation * invocation = [NSInvocation invocationWithMethodSignature:signature];
    //设置响应者
    invocation.target = self;
    //设置方法选择器
    invocation.selector = selector;
    //通过循环设置参数
    NSInteger paramsCount = signature.numberOfArguments;
    paramsCount = MIN(paramsCount, objects.count);
    for (NSInteger i = 0; i<paramsCount; i++) {
        id object = objects[i];
        if ([object isKindOfClass:[NSNull class]]) {
            continue;
        }
        [invocation setArgument:&object atIndex:i+2];
    }
    //调用方法
    [invocation invoke];
    //获取返回值
    id returnValue = nil;
    //当返回值不是空的时候
    if (signature.methodReturnLength) {
        [invocation getReturnValue:&returnValue];
    }
    return returnValue;
}

我们捕捉href跳转时webview的拦截代理方法就可以写成下面的样子

//捕获location.href的跳转信息
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

    //获取跳转的URL
    NSString * url = request.URL.absoluteString;
    //自定义的协议
    NSString * scheme = @"heihei://";
    //如果url中是我们自定义的协议，实现OC中的方法
    if ([url containsString:scheme]) {
        //截取自定义协议后面的字符串
        NSString * path = [url substringFromIndex:scheme.length];
        NSString * method = nil;
        NSArray * params = nil;
        //字符串是否包含？，判断是否有参数
        if ([path containsString:@"?"]) {
            //有参数
            //通过？分割，
            NSArray * info = [path componentsSeparatedByString:@"?"];
            //数组第一个元素就是方法名,将js中的_替换为：转换为OC中的方法名
            method = [[info firstObject] stringByReplacingOccurrencesOfString:@"_" withString:@":"];
            //数组第二个元素就为参数字符串
            NSString * param = [info lastObject];
            //将参数以&分割变为参数数组
            params = [param componentsSeparatedByString:@"&"];
        }else{
            //无参数
            //方法名
            method = path;
            //参数数组
            params = @[];
        }
        NSLog(@"method:%@------params:%@",method,params);
        //通过方法签名来调用方法，因为参数的个数未知，所以我们封装一个比较通用的方法
        [self performSelect:NSSelectorFromString(method) withObjects:params];

        return NO;
    }
    return YES;
}

在html中按照我们的规则进行跳转

<script>
            function ceshi()
            {
                location.href = 'heihei://ceshi';
            }
            function ceshi1()
            {
                location.href = 'heihei://ceshi_?100';
            }
            function ceshi2()
            {
                location.href = 'heihei://ceshi_number2_?100&200';
            }
            function ceshi3()
            {
                location.href = 'heihei://ceshi_number2_number3_?100&200&300';
            }
        </script>

Demo全部代码

index.html

<html>
    <!-- 网页的描述信息 -->
    <head>
        <meta charset="UTF-8">
        <title>HeiheiJSWithOC</title>
            
        <script>
            function ceshi()
            {
                //没有参数时
                location.href = 'heihei://ceshi';
            }
            function ceshi1()
            {
                //一个参数时
                location.href = 'heihei://ceshi_?100';
            }
            function ceshi2()
            {
                //二个参数时
                location.href = 'heihei://ceshi_number2_?100&200';
            }
            function ceshi3()
            {
                //三个参数时
                location.href = 'heihei://ceshi_number2_number3_?100&200&300';
            }
            function test(){
        
                alert("ceshi");
            }
        </script>
    </head>
    <!-- 网页的具体内容 -->
    <body>
        <div>电话：10086</div>
        <br>
        <button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi();">测试无参数</button>
        <br>
        <button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi1();">测试1个参数</button>
        <br>
        <button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi2();">测试2个参数</button>
        <br>
        <button style="color:white ;background-color: red; width:100px; height:30px; margin-top:5px" onclick="ceshi3();">测试3个参数</button>
        <br>
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

OC中ViewController.m的代码

//
//  ViewController.m
//  OCWithJS
//
//  Created by zzh on 2017/2/17.
//  Copyright © 2017年 zzh. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
-(void)viewDidLoad {
    [super viewDidLoad];
    //加载web  本地的一个html文件
    NSURL * url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest * request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}
#pragma mark - 不同参数的测试方法
-(void)ceshi{    
    NSLog(@"%s----无参数", __func__);    
}
-(void)ceshi:(NSString *)number1{   
    NSLog(@"%s----%@---", __func__,number1);    
}
-(void)ceshi:(NSString *)number1 number2:(NSString *)number2{    
    NSLog(@"%s----%@---%@--", __func__,number1,number2);   
}
-(void)ceshi:(NSString *)number1 number2:(NSString *)number2 number3:(NSString *)number3{   
    NSLog(@"%s----%@---%@---%@---", __func__,number1,number2,number3);    
}
#pragma mark - UIWebViewDelegate
//捕获location.href的跳转信息
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

    //获取跳转的URL
    NSString * url = request.URL.absoluteString;
    //自定义的协议
    NSString * scheme = @"heihei://";
    //如果url中是我们自定义的协议，实现OC中的方法
    if ([url containsString:scheme]) {
        //截取自定义协议后面的字符串
        NSString * path = [url substringFromIndex:scheme.length];
        NSString * method = nil;
        NSArray * params = nil;
        //字符串是否包含？，判断是否有参数
        if ([path containsString:@"?"]) {
            //有参数
            //通过？分割，
            NSArray * info = [path componentsSeparatedByString:@"?"];
            //数组第一个元素就是方法名,将js中的_替换为：转换为OC中的方法名
            method = [[info firstObject] stringByReplacingOccurrencesOfString:@"_" withString:@":"];
            //数组第二个元素就为参数字符串
            NSString * param = [info lastObject];
            //将参数以&分割变为参数数组
            params = [param componentsSeparatedByString:@"&"];
        }else{
            //无参数
            //方法名
            method = path;
            //参数数组
            params = @[];
        }
        NSLog(@"method:%@------params:%@",method,params);
        //通过方法签名来调用方法，因为参数的个数未知，所以我们封装一个比较通用的方法
        [self performSelect:NSSelectorFromString(method) withObjects:params];

        return NO;
    }
    return YES;
}
-(void)webViewDidFinishLoad:(UIWebView *)webView{
    //oc调用js
    NSString * title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    self.title = title;
   [webView stringByEvaluatingJavaScriptFromString:@"test();"];
}
#pragma mark - 根据方法签名调用方法
-(id)performSelect:(SEL)selector withObjects:(NSArray *)objects{
    //方法签名（方法描述）
    NSMethodSignature * signature = [self methodSignatureForSelector:selector];
    if (signature == nil) {
        //找不到该方法抛出异常
        @throw [NSException exceptionWithName:@"牛逼的错误" reason:@"方法找不到" userInfo:nil];
    }
    // NSInvocation : 利用一个NSInvocation对象包装一次方法调用（方法调用者、方法名、方法参数、方法返回值）
    NSInvocation * invocation = [NSInvocation invocationWithMethodSignature:signature];
    //设置响应者
    invocation.target = self;
    //设置方法选择器
    invocation.selector = selector;
    //通过循环设置参数
    NSInteger paramsCount = signature.numberOfArguments;
    paramsCount = MIN(paramsCount, objects.count);
    for (NSInteger i = 0; i<paramsCount; i++) {
        id object = objects[i];
        if ([object isKindOfClass:[NSNull class]]) {
            continue;
        }
        [invocation setArgument:&object atIndex:i+2];
    }
    //调用方法
    [invocation invoke];
    //获取返回值
    id returnValue = nil;
    //当返回值不是空的时候
    if (signature.methodReturnLength) {
        [invocation getReturnValue:&returnValue];
    }
    return returnValue;
}
@end

iOS OC与JS 相互调用

OC调用JS

JS调用OC

Demo全部代码

猜你喜欢

热点阅读