使用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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
vue2中使用less简易教程
Mar 27 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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连接access数据库
2008/03/27 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
php格式化电话号码的方法
2015/04/24 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
独特的python循环语句
2016/11/20 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python3.5的包存放的具体路径
2020/08/16 Python
Python类成员继承重写的实现
2020/09/16 Python
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
《水乡歌》教学反思
2014/04/24 职场文书
中秋节活动总结
2014/08/29 职场文书
旷工检讨书大全
2015/08/15 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
python数字图像处理:图像的绘制
2022/06/28 Python