iOS与JS的交互

iOS和JS的交互看似两个问题,其实要解决的问题只有一个,那就是JS如何调用native方法。因为查询文档我们就可以发现,在UIWebView中,native有直接调用JS的方法, 但是JS却没有直接调用native的方法。

一、native直接调用js的方法:

-(NSString*)stringByEvaluatingJavaScriptFromString
:(NSString *)script;

二、JS直接调用native的方法

其实,UIWebView并没有提供JS调用native的方法,但是我们却可以通过间接的方法来实现这样的操作。总结看来,间接实现的方式有4种: 1. 在代理方法拦截Url,识别判断 2. Block传值,实现JS调用OC 3. 模型实现,JS直接用oc方法名来调用oc方法 4. 使用第三方工具类:WebViewJavascriptBridge 下面就来简单介绍一下上述方法的简单实用

1.在代理方法拦截Url,识别判断

这种方法原理很简单,UIWebView的界面响应会调起下面的代理方法

- (BOOL)webView:(UIWebView *)webView 
   shouldStartLoadWithRequest:(NSURLRequest *)request
               navigationType:(UIWebViewNavigationType)navigationType;

在该方法中我们可以识别网页链接中的特殊字段,从而达到JS调起原生方法的目的

//第一步:使用本地的h5文件加载一个网页
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"testWebPage" ofType:@"html"];
NSError *error = nil;
NSString  *str = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:&error];
[self.webView loadHTMLString:str baseURL:nil];

//h5文件中JS关键代码如下:
<p > 
    <button id="chat" type="button" onclick="location.href    ='http://www.testwebpage/?
    funcName=printInfo:&&info=helloword'">打印信息</button>
</p>
//第二步:拦截协议
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
        //获取此时的URL
        //'http://www.testwebpage/?funcName=printInfo:&&info=helloword'
        NSURL *url = [request URL];
        NSString *completeString = [url absoluteString];

        //第一步:检测链接中的特殊字段
        NSString *needCheckStr = @"http://www.testwebpage/?";
        NSRange jumpRange = [completeString rangeOfString:needCheckStr];
        if (jumpRange.location != NSNotFound) {
        /*
         1.检测到链接中包含有特殊字段,客户端要接受响应并做后续处理这就相当于js调起了iOS,
         2.在真实的使用时,客户端需要和h5协调,双方需要统一监听的字段
         3.参数问题:如果此时的交互需要传递参数,参数也可以放在链接里,同样通过识别字符串的方法来获取
         */
        //第二步:拿到链接字符串的后续部分,然后分割字符串得到参数数据
        NSMutableString *linkmStr = [NSMutableString stringWithString:completeString];
        NSRange deleteRange = {0,needCheckStr.length};
        [linkmStr deleteCharactersInRange:deleteRange];
        NSArray *params = [linkmStr componentsSeparatedByString:@"&&"];
        //取出第一个参数:与h5协商好的方法名
        NSString *funcName = [params[0] componentsSeparatedByString:@"="][1];
        //取出第二个参数:信息字符串
        NSString *info = [params[1] componentsSeparatedByString:@"="][1];
        //第三步:调起iOS原生方法
        SEL ocFunc = NSSelectorFromString(funcName);
        if ([self respondsToSelector:ocFunc]) {
        //使用编译预处理,不显示警告提示
        #pragma clang diagnostic push
        #pragma clang diagnostic ignored "-Warc-performSelector-leaks"
            [self performSelector:ocFunc withObject:info];
        #pragma clang diagnostic pop
        }
        //返回NO是为了不再执行点击原链接的跳转
        return NO;
    }
    return YES;
}

2.Block传值,实现JS调用OC

这种方法需要引入头文件 import <JavaScriptCore/JavaScriptCore.h> 具体的代码操作如下:

JS关键代码:
<p>
  <button onclick="sayHello('helloword')" type="button">问候</button>
</p>
OC关键代码:
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    //获取JSContext对象
    JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //sayHello就是js的方法名称,使用一个block对应赋值
    __weak typeof (self) weakSelf = self;
    context[@"sayHello"] = ^() {
        NSArray *args = [JSContext currentArguments];
        NSString *objString = [NSString stringWithFormat:@"%@",args[0]] ;
        if (objString.length >0) {
            //得到参数之后,这里可以使用调用OC方法,即实现了JS对于OC的调用
            [weakSelf printInfo:objString];
          }
     };
}

3.模型实现,JS直接用oc方法名来调用oc方法

这种方法的优点在于,JS可以直接用oc方法名来调用oc方法,这样就类似于安卓的addJavaScriptInterface方法,在使用此方法时仍然要导入JavaScriptCore

//第一步:创建一个用与JS交互的类JSHandler继承与NSObject
//在类中声明一个遵守JSExport的协议,并且使JSHandler实现这个新的协议
@protocolJSHandlerProtocol <JSExport>
//单参数方法
- (void)sayHello:(NSString*)greeting;

//多参数的方法
//由于涉及到多参数的问题,从第二个参数开始,外部参数名都要使用大写开头
//因为JS调用OC方法时,是将OC方法拼接连成字符串,如果无法区分就会造成无法识别
//比如对于下面的OC方法,JS调用时
//javascript.sayHelloToWithGreeting(‘参数1’,参数2) //正确写法
//javascript.sayHelloTowithGreeting(‘参数1’,参数2) //错误写法
- (void)sayHelloTo:(NSString*)name WithGreeting:(NSString*)greeting;
@end

@interface JSHandler : NSObject<JSHandlerProtocol>

@end
//第二步:实现协议方法
@implementationJSHandler:NSObject
//单参数方法
- (void)sayHello:(NSString*)greeting{
    NSLog(@"%s", __func__);
    NSLog(@"%@",greeting);
}

//两个参数的方法
- (void)sayHelloTo:(NSString*)name WithGreeting:(NSString*)greeting{
    NSLog(@"%s", __func__);
    NSLog(@"%@,%@",name,greeting);
}

@end
 //第三步:在webView所在的视图控制中,创建JSContext对象,使用协议方法
   JSContext*jsContext = [self.webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
   JSHandler*jsHandler = [JSHandlernew];
 //使jsContext可以识别javascript这个类的方法
    jsContext[@"javascript"] = jsHandler;
//第四步:此步骤是H5部分的操作,能够调起OC方法的代码如下
       <p>sayHello<buttonid="opennew"type="button"onclick="javascript.sayHello('你好!')">问候1</button></p>
         <p>sayHelloTo<buttonid="opennew2"type="button"onclick=
           "javascript.sayHelloToWithGreeting('zhoushuai', 'Good morning!')">问候2</button></p>

4.使用第三方工具类:WebViewJavascriptBridge

还未使用过,暂时不做过多介绍

demo的github地址: https://github.com/DreamcoffeeZS/OC-And-JS

参考链接: http://www.cocoachina.com/ios/20160127/15105.html http://www.jianshu.com/p/2c7a53713e13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术总结

FBKVOController源码剖析与学习

建议查看原文:https://www.jianshu.com/p/4a3f9fe13e5a(不定时更新)

23740
来自专栏小灰灰

Batik渲染png图片异常的bug修复全程记录

batik是apache的一个开源项目,可以实现svg的渲染,后端借助它可以比较简单的实现图片渲染,当然和java一贯处理图片不太方便一样,使用起来也有不少坑

26270
来自专栏ShaoYL

单例设计模式

354120
来自专栏落影的专栏

iOS面试题----实践向

前言 很多人都说熟悉UIKit,那对于常见的API是否熟悉? 多线程是前端经久不衰的考点。 大家对于Block的weak-strong dance都耳熟能详...

46270
来自专栏编码小白

tomcat请求处理分析(六)servlet的处理过程

1.1.1.1  servlet的解析过程 servlet的解析分为两步实现,第一个是匹配到对应的Wrapper,第二个是加载对应的servlet并进行数据,这...

75470
来自专栏哈雷彗星撞地球

iOS下JS与OC互相调用(三)--MessageHandler

使用WKWebView的时候,如果想要实现JS调用OC方法,除了拦截URL之外,还有一种简单的方式。那就是利用WKWebView的新特性MessageHandl...

29140
来自专栏Flutter入门

Weex是如何在Android客户端上跑起来的

Weex可以通过自己设计的DSL,书写.we文件或者.vue文件来开发界面,整个页面书写分成了3段,template、style、script,借鉴了成熟的MV...

52150
来自专栏Spark生态圈

[spark] Task成功执行的结果处理

在文章Task执行流程 中介绍了task是怎么被分配到executor上执行的,本文讲解task成功执行时将结果返回给driver的处理流程。

26040
来自专栏娱乐心理测试

ios 几种容易忽略的内存泄漏方式

一、从AFNetWorking说起 对于AFNetWorking的使用我们通常会对通用参数、网址环境切换、网络状态监测、请求错误信息等进行封装。在封装网络请求...

14720
来自专栏大内老A

为ASP.NET MVC创建一个基于Unity的ControllerFactory

谈到IoC和ASP.NET的集成,很多人会先后想到Ninject,不过我们个人还是倾向于Unity。这篇文章简单地介绍如果创建基于Unity的Controlle...

19970

扫码关注云+社区

领取腾讯云代金券