美文网首页ios 进阶iOS 深度好文iOS点滴
iOS JS 交互之利用系统JSContext实现 JS调用oc

iOS JS 交互之利用系统JSContext实现 JS调用oc

作者: 罗同学_ | 来源:发表于2016-03-25 17:31 被阅读17542次

       公司员工端项目还剩最后一块js交互剩着,由于项目是仿安卓端做的,之前做安卓的那个走了好久,问现在的安卓他也是一头雾水,自己搞了一个星期,也是云里雾里。

      对于交互这一块,安卓实现起来非常的方便,一句addJavascriptInterface就能解决,而iOS则比较麻烦特别是对于我这种.............

..........,网上查了一大堆大都是粘贴复制差不多的文章,都没能解决我的问题,无意间看到了一篇有关于JSContext的介绍,终于还是解决了问题.

 Show The Code :


ios js 交互分为两块:

1.oc调用js 

这一块实现起来比较简单,

我的项目中加载的是本地的html,js,css,需要注意的是当你向工程中拖入这些文件时,选择如下操作,(拖入的文件夹是蓝色的,相对路径),不然css,js 的路径会存在问题

加载本地html:

oc调用js:一句代码搞定


2.js 调用oc

  js调用oc又分为两种:

 1.js端是直接调用方法

 

这里就要说到ios7才推出的一个新的api    JavaScriptCore,首先我们引入这个类,并初始化一个JSContext对象

在webViewDidFinishLoad方法里

此处通过当前webView的键获取到jscontext

将我们的context对象与js方法建立桥接联系,

其中test1表示我们js里面的方法名,这个名字要你和后台约定好一样才行,ok,完事

2.js端通过对象调用方法

说到对象调方法我们首先肯定得有个对象,所以我们首先需要创建一个js交互类,并声明和实现相应的交互方法,在这里需要注意的是我们需要在这个自定义交互类里面导入JavaScriptCore框架,声明一个遵从于JSExport协议的协议(有点绕,看图),在这个协议里声明我们的交互方法,最后让我们的交互类遵从与我们自定义的协议

在交互类的.m中实现相应的js交互方法,并实现我们想要的操作

注意到图上的 JSExportAs(showconfirm, - (void)showconfirm:(NSString*)str Scripts:(NSString*)scripts); 这个方法没有,这个方法的作用是当js端的方法有两个或两个以上参数时,我们需要让- (void)showconfirm:(NSString*)str Scripts:(NSString*)scripts这个方法代替 showconfirm 这个方法,因为oc端的方法名必须和js端的保持一致,不然就不会调用

最后在我们的webViewDidFinishLoad方法里初始化我们的交互对象,并让 context 与之建立联系,ok,完事


第一次写简书,如果你觉得我的文章对你有帮助的话请给个赞,谢谢!

相关文章

网友评论

  • Mortaler:如果js调的方法需要返回值,oc这边该怎么写呢,现在被这个问题卡住了,求解救
  • 大刘:但是你发现一个问题没有,在OC代码里需要写大量的字符串用以匹配JS调用的方法:比如:
    self.jsContext[@"onClickBack"] = ^(id param) {
    ...
    };
    self.jsContext[@"onClickBack2"] = ^(id param) {
    ...
    };
    self.jsContext[@"onClickBack3"] = ^(id param) {
    ...
    };
  • 我觉得ok_:注入“self.context[@"test1"]”之后,控制器就不会释放,不会走dealloc方法,不知道你有没有遇到这个情况?
  • 翡翠王国007:博主,能发一个demo过来吗?看不太懂,813303340@qq.com
    罗同学_:@翡翠王国007 没有demo,都是最初从项目里扣出来的,如果你们最低版本已经是iOS8了,建议使用WKWebView,加载速度更快,js交互也比较好处理
  • 空转风:求demo,529254622@qq.com
    罗同学_:没有demo,当初是从项目里直接拿出来的:joy:
  • HelloEverything:请问一下 OC 调用 JS 方法 JS方法名后面拼接的那个网址是从哪里来的?
  • 素酥:大哥我想要的你demo。。我现在写的是可以用但是造成了不释放状况。。求教。。
    LoveY34:@素酥 你好!无法释放的问题解决了吗?
    素酥:@素酥 context=[CommentsWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    context[@"Comments"]= self;
  • 0ee0bef651f8:有一件事情我一直很困扰,原生界面A->H5界面->原生界面B,从B回到H5之后,然后H5中用HTML代码里注册的js方法执行oc原生方法都是在主线程,而当原生界面A->H5界面后不再跳转至B,H5界面执行js方法调用oc原生方法的时候却不在主线程,这个问题相当困惑,不知道博主遇到过没有。
    灬观众:我已经回到了主线程 但是为什么还是无法返回到上一个原生界面呢?
    罗同学_:@charwk 有,所以如果需要UI操作的话需要手动回到主线程
  • 看个客人:如果只是调用js文件,不通过html ,怎么通过JSContext 获取js文件路径
  • 42e1c79aee08:请教一下楼主,导航栏是OC的,当我在web的第二级界面上的时候,点击导航的返回按钮,怎么返回到web的第一级界面
  • ba7e2802f675:学习了!
    楼主 xcode的编辑页面字体、配色和我一模一样,好亲切啊。
  • 大斜的张:博主 可以给个联系方式吗 我这边 web一刷新 js就不能用了
    大斜的张:@你的猴哥 我的最后后端改变了调用的方式 具体点的 就不清楚了
    dong_liang:@你的猴哥 你们的都解决了吗?怎么弄的?
    K__M:@史说 你的怎么解决的求解决
  • ImmortalSummer:js如何调用oc的多参数方法?(两个或以上)
  • __西门吹雪:亲,为什么我从web页进入到下一个web页,在返回到前一个web页,我这个js交互就失效了呢?
    大斜的张:@__西门吹雪 好吧 解决了问题就够了
    __西门吹雪:@史说 我解决了,我搞了两个相同的webVC。对着跳。哈哈。虽然很low。但是解决问题呀 :joy:
    大斜的张:@__西门吹雪 你的问题解决了吗
  • 水户洋平_Psist:请教一下 ,就是代理函数里创建jscontext对象时 一定要通过webview的键来获取吗 alloc init方式可以吗 这边遇到点问题 求指点
    2b027e772362:@水户洋平_Psist 可以,但是如何拿到webview 环境呢
  • 来宝: 请教一下,self.context[@"hs"] = hs,第一个hs是什么意思,取名有什么讲究吗,需要和js端名称一致吗?
    罗同学_:@来宝 不太记得了,要么是类名要么是对象名吧
    来宝:这个是方法名还是类名?
    罗同学_:@来宝 对的,要和js短保持一致
  • 海边的1984_:帅锅能不能给demo看看,正在做这个 15101165305@163.com,发完说一声哈谢谢
  • 9f986c0f7698:正在研究oc与js的交互,感谢啦

本文标题:iOS JS 交互之利用系统JSContext实现 JS调用oc

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