使用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 相关文章推荐
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
javascript中new关键字详解
2015/12/14 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
开会通知
2015/04/20 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android