使用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 相关文章推荐
jquery操作angularjs对象
Jun 26 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Angular 数据请求的实现方法
May 07 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 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
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
JS实现两个大数(整数)相乘
2014/04/28 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
js实现本地图片文件拖拽效果
2017/07/18 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
公司出纳岗位职责
2013/12/07 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
论文答谢词
2015/01/20 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Vue+Flask实现图片传输功能
2022/04/01 Vue.js