使用JavaScriptCore实现OC和JS交互详解


Posted in Javascript onMarch 28, 2017

JavaScriptCore

JavaScriptCore是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。iOS7后苹果在iPhone平台推出,极大的方便了我们对js的操作。

首先创建webView,读取本地的html文件

NSURL* htmlURL = [[NSBundle mainBundle] URLForResource: @"demo" withExtension: @"html"];
[_webView loadRequest: [NSURLRequest requestWithURL: htmlURL]];

在demo中,我们要实现4种情况

  1. JS调用OC
  2. JS调用OC并传递参数
  3. OC调用JS
  4. OC调用JS并传递参数

html文件中代码如下

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
 function showAlert(){
  alert('OC call JS with no argument');
 }
 function showAlertWithString(string){
  alert(string);
 }
 function callOCWithArgument() {
  jsCallOCWithArgument('参数1 ','参数2 ','参数3');
 }
 </script>
</head>
<body>
 </br>
 </br>
 </br>
 </br>
 <form>
  <button type='button' onclick='callOC()'>jsCallOC</button>
  <button type='button' onclick='callOCWithArgument()'>jsCallOCWithArgument</button>
 </form>
</body>
</html>

JS调用OC

在webView的代理方法webViewDidFinishLoad中

-(void)webViewDidFinishLoad:(UIWebView *)webView
{

 _context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
 __weak typeof(self) weakSelf = self;
 _context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
  weakSelf.context.exception = exception;
 };

 //js调用OC
 _context[@"callOC"] = ^() {
  NSArray *args = [JSContext currentArguments];
  for (JSValue *jsVal in args) {
   NSLog(@"%@", jsVal.toString);
  }
  dispatch_async(dispatch_get_main_queue(), ^{
   UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"arguments" message:@"JS Call OC With No Argument" preferredStyle:UIAlertControllerStyleAlert];
   UIAlertAction * action = [UIAlertAction actionWithTitle:@"Done" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

   }];
   [alertView addAction:action];
   [weakSelf presentViewController:alertView animated:YES completion:nil];
  });
 };

 _context[@"jsCallOCWithArgument"] = ^() {
  NSArray *args = [JSContext currentArguments];
  NSMutableString * stirng = [NSMutableString string];
  for (JSValue * value in args) {
   [stirng appendString:value.toString];
  }
  dispatch_async(dispatch_get_main_queue(), ^{
   UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"arguments" message:stirng preferredStyle:UIAlertControllerStyleAlert];
   UIAlertAction * action = [UIAlertAction actionWithTitle:@"Done" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
   }];
   [alertView addAction:action];
   [weakSelf presentViewController:alertView animated:YES completion:nil];
  });
 }; 
}

我们定义一个block,然后保存到context里面,其实就是转换成了JS中命名为callOC的function。然后我们直接执行这个function,调用的就是我们的block里面的内容了。

传过来的参数可以通过[JSContext currentArguments]这个array接受,里面是JSValue对象。

OC调用JS

初始化两个Button,在点击事件中实现如下方法

- (IBAction)callJS:(id)sender {
 [_context evaluateScript:@"showAlert()"];
}
- (IBAction)callJSWithArguments:(id)sender {

 [_context evaluateScript:@"showAlertWithString('OC call JS with arguments')"];
// [_context[@"showAlertWithString"] callWithArguments:@[@"OC call JS with arguments"]];
}

即可实现OC调用JS。

demo已上传,需要的可以点此下载查看。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
JS实现的文件拖拽上传功能示例
May 21 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
JavaScript实现分页效果
Mar 28 #Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 #Javascript
TypeScript入门-基本数据类型
Mar 28 #Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 #Javascript
Vue.js 60分钟快速入门教程
Mar 28 #Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 #Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 #Javascript
You might like
最常用的8款PHP调试工具
2014/07/06 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
机械设计制造专业个人求职信
2013/09/25 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
一年级学生期末评语
2014/04/21 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
涨价通知
2015/04/23 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python