使用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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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
Laravel 5 框架入门(三)
2015/04/09 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Javascript Select操作大集合
2009/05/26 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
python实现图片批量剪切示例
2014/03/25 Python
python监控文件或目录变化
2016/06/07 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python3 实现调用串口功能
2019/12/26 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
积极分子思想汇报
2014/01/04 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
经济国贸专业求职信
2014/06/18 职场文书
公司借条范本
2015/05/25 职场文书
怒海潜将观后感
2015/06/11 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
nginx.conf配置文件结构小结
2022/04/08 Servers
Redis主从复制操作和配置详情
2022/09/23 Redis