使用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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
js变量以及其作用域详解
Jul 18 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
理解JavaScript事件对象
Jan 25 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
详解Python中的循环语句的用法
2015/04/09 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python作用域用法实例详解
2016/03/15 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python解析json代码实例解析
2019/11/25 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
什么是类的返射机制
2016/02/06 面试题
网络安全方面的面试题
2016/01/07 面试题
政府法律服务方案
2014/06/14 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
小学副班长竞选稿
2015/11/21 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android