使用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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
js处理表格对table进行修饰
May 26 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
全面解析bootstrap格子布局
May 22 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 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程序架构设计思路之使用动作类
2018/06/07 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
python八大排序算法速度实例对比
2017/12/06 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python中反射和描述器总结
2018/09/23 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
请假条范文大全
2014/04/10 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python