使用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 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
axios学习教程全攻略
Mar 26 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
微信小程序实现购物车功能
Nov 18 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
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
围观tangram js库
2010/12/28 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
Vue基础配置讲解
2019/11/29 Javascript
js实现烟花特效
2020/03/02 Javascript
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
教学个人的自我评价分享
2014/02/16 职场文书
社区母亲节活动方案
2014/03/05 职场文书
房屋转让协议书范本
2014/04/11 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
面试通知单大全
2015/04/20 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
植树节新闻稿
2015/07/17 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript