使用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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
vue实现简单的登录弹出框
Oct 26 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
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
输出控制类
2006/10/09 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
使用python Django做网页
2013/11/04 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python下载库的步骤方法
2019/10/12 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
应届生法律求职信
2013/10/22 职场文书
出纳岗位职责模板
2013/11/27 职场文书
应届生的求职推荐信范文
2013/11/30 职场文书
小学生安全演讲稿
2014/04/25 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
关于JavaScript回调函数的深入理解
2021/06/27 Javascript