使用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 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
php 数组使用详解 推荐
2011/06/02 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python套接字流重定向实例汇总
2016/03/03 Python
说一说Python logging
2016/04/15 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python实现滑雪游戏
2020/02/22 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python绘制趋势图的示例
2020/09/17 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
质检的岗位职责
2013/11/17 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
计算机实训心得体会
2016/01/14 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript