使用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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 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
咖啡常见的种类
2021/03/03 新手入门
function.inc.php超越php
2006/12/09 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
利用python实现数据分析
2017/01/11 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
超实用的 30 段 Python 案例
2019/10/10 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
python 贪心算法的实现
2020/09/18 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
物业门卫岗位职责
2013/12/28 职场文书
开学寄语大全
2014/04/08 职场文书
法院信息化建设方案
2014/05/21 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
浅谈Redis缓冲区机制
2022/06/05 Redis
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers