使用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两种function的定义介绍及区别说明
May 02 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 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
yii实现级联下拉菜单的方法
2014/07/31 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python删除文本中行数标签的方法
2018/05/31 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Python调用Windows命令打印文件
2020/02/07 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
社区消防工作实施方案
2014/03/21 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫