使用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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 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
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python获取本机外网ip的方法
2015/04/15 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Django框架视图函数设计示例
2019/07/29 Python
Python谱减法语音降噪实例
2019/12/18 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
森马旗舰店双十一营销方案
2014/09/29 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
新郎接新娘保证书
2015/05/08 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL