使用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生成随机大小写字母的方法
Feb 20 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
写一个Vue loading 插件
Nov 09 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
德生1994机评
2021/03/02 无线电
摩卡咖啡
2021/03/03 咖啡文化
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
python爬取微博评论的实例讲解
2021/01/15 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
客户经理岗位职责
2013/12/08 职场文书
毕业生自荐书
2014/02/02 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
普通话演讲稿
2014/09/03 职场文书
安全主题班会教案
2015/08/12 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫