美文网首页
iOS下JS与OC互相调用

iOS下JS与OC互相调用

作者: 飞奔的小鲨鱼 | 来源:发表于2019-09-26 21:38 被阅读0次

    在我们实际的开发过程中,经常会遇到JS与OC相互调用的过程,现将一些常用的方法整理出来。
    1.UIWebView 代理方法拦截URL。
    2.WKWebView 代理方法拦截URL。
    3.利用系统库JavaScriptCore。

    1.UIWebView 代理方法拦截URL

    JS调用OC
    js部分相关代码

    <div>
      <button class=\"btn\" type=\"button\" onclick=\"btnClick2()\">
        JS调用OC方法 一个参数
      </button>
    </div>
    function btnClick2() { location.href = \"testhtml://method2?iPhone7Plus\"}
    

    testhtml是你和h5约定好的,通过在UIWebView的代理方法,实现调用OC的方法。
    oc相关代码

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
        
        void (^AlertViewBlock)(NSString * title,NSString * message,NSString * cancel) = ^(NSString * title,NSString * message,NSString * cancel){
            UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:title message:message delegate:self cancelButtonTitle:cancel otherButtonTitles:nil];
            [alertView show];
        };
        
        NSString * urlString = request.URL.absoluteString;
        NSString * scheme = @"testhtml://";
        if ([urlString hasPrefix:scheme]) {
            //
            NSString * subString = [urlString substringFromIndex:scheme.length];
            NSArray * temp = [subString componentsSeparatedByString:@"?"];
            NSString * method = [temp firstObject];
            
            if ([method isEqualToString:@"method1"]) {
                AlertViewBlock(@"JS调用OC方法",@"无参",@"取消");
            }else if ([method isEqualToString:@"method2"]) {
                NSString * param = [temp lastObject];
                AlertViewBlock(@"JS调用OC方法",[NSString stringWithFormat:@"一个参数\n参数为:%@",param],@"取消");
            }else if ([method isEqualToString:@"method3"]) {
                NSString * string = [temp lastObject];
                NSRange range = [string rangeOfString:@"&"];
                NSString * param1 = [string substringToIndex:range.location];
                NSString * param2 = [string substringFromIndex:range.location + 1];
                AlertViewBlock(@"JS调用OC方法",[NSString stringWithFormat:@"两个参数\n参数为:%@,%@",param1,param2],@"取消");
            }
        }
        
        return YES;
    }
    

    OC调用JS
    js相关代码

    function alertName(msg) { alert('OC调用JS 一个参数 ' + msg )}
    

    oc相关代码
    在oc中创建一个按钮,点击按钮,调用js中的alertName方法

    - (IBAction)buttonClick:(UIButton *)button{
           NSLog(@"OC调用JS 一个参数");
           // 如果js的方法中需要传入多个参数,可以通过字符串拼接的方式实现
           NSString * testJS = [NSString stringWithFormat:@"alertName('%d')",10];
           [self.webView stringByEvaluatingJavaScriptFromString:testJS];
     }
    

    2.WKWebView拦截URL实现

    WKWebView是Apple在iOS8推出的Webkit框架中的负责网页的渲染与展示的类,区别如下:

    1. UIWebView会导致内存问题,WKWebView相比UIWebView速度更快,占用内存更少,支持更多的HTML特性。
    2. 同时WKWebView可以很容易地实现H5页面加载进度。
    3. WKWebView不能弹出前端的alert,需在代理方法中弹出原生alertController。

    JS调用OC
    实现WKNavigationDelegate的代理方法,在方法中通过判断与h5定义好的方法名称,去调用对应的OC方法

    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
        NSString * absoluteString = [navigationAction.request.URL.absoluteString stringByRemovingPercentEncoding];
        NSString * scheme = @"testhtml://";
        // JS调用OC
        if ([absoluteString hasPrefix:scheme]) {
            [self jsCallOCMethodWithRequest:navigationAction.request];
            decisionHandler(WKNavigationActionPolicyCancel);
        }else {
            decisionHandler(WKNavigationActionPolicyAllow);
        }
    }
    

    OC调用JS
    点击OC中的button按钮,去调用JS中的方法,在button的方法中加入以下代码:

    NSString * testJS = [NSString stringWithFormat:@"ocCallJs('%d')",arc4random_uniform(100)];
     [self.wkWebView evaluateJavaScript:testJS completionHandler:^(id _Nullable response, NSError * _Nullable error) {}];
    

    3.JavaScriptCore

    1.导入<JavaScriptCore/JavaScriptCore.h>
    2.遵循<UIWebViewDelegate>并实现- (void)webViewDidFinishLoad:(UIWebView *)webView方法。
    与前两个拦截URL明显不同的是,JS可以直接调用原生的方法了。
    JS调用OC
    js代码

    <div><button class=\"btn\" type=\"button\" onclick=\"btnClick4()\">JS调用OC方法(JavaScriptCore)</button></div>
    function btnClick4() { ocClick('10');}\
    

    oc代码
    在UIWebView的- (void)webViewDidFinishLoad:(UIWebView *)webView代理方法中

    JSContext * context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        //! 监听JS代码里面的jsToOc方法(执行效果上可以理解成重写了JS的jsToOc方法)
        context[@"ocClick"] = ^(NSString * str1, NSString * str2) {
            dispatch_async(dispatch_get_main_queue(), ^{
                NSLog(@"str1 %@ , --- str2 %@ ,",str1,str2);
                // 要执行的oc代码
            });
        };
    

    OC调用JS
    js代码

    function ocCallJs(action, params) { document.getElementById(\"returnValue\").innerHTML = action + '?' + params;}
    

    oc代码

        // 写法1.
    //    [context[@"ocCallJs"] callWithArguments:@[@"111",@"222"]];
        
        // 写法2.
        NSString *jsStr = [NSString stringWithFormat:@"ocCallJs('%d','%d')",15,20];
        [context evaluateScript:jsStr];
    

    注意点:JavaScriptCore可以通过JS直接调用原生函数,所以相对于拦截URL响应,JS与原生的数据传递更方便。
    因为WKWebView不能通过KVC获取JSContext对象,所以原生使用JavaScriptCore做数据交互的时候,就不能用WKWebView去加载H5页面。

    demo

    相关文章

      网友评论

          本文标题:iOS下JS与OC互相调用

          本文链接:https://www.haomeiwen.com/subject/bbieyctx.html