使用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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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
对盗链说再见...
2006/10/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
如何使用php实现评委评分器
2015/07/31 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
javascript中的this详解
2014/12/08 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
运动会获奖感言
2014/02/11 职场文书
安全宣传标语口号
2014/06/06 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
网聊搭讪开场白
2015/05/28 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP