使用JavaScriptCore实现OC和JS交互详解
JavaScriptCore
JavaScriptCore是webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境。iOS7后苹果在iPhone平台推出，极大的方便了我们对js的操作。
首先创建webView,读取本地的html文件
NSURL* htmlURL = [[NSBundle mainBundle] URLForResource: @"demo" withExtension: @"html"]; [_webView loadRequest: [NSURLRequest requestWithURL: htmlURL]];
在demo中，我们要实现4种情况
- JS调用OC
- JS调用OC并传递参数
- OC调用JS
- 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已上传，需要的可以点此下载查看。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关推荐
-
IOS ObjectC与javascript交互详解及实现代码
IOS OC与js交互详解 JS注入 : 把JS代码有OC注入到网页 JS注入又叫做OC和JS的交互 OC和JS的交互需要一个桥梁(中介),这个桥梁就是UIWebView的代理方法 网页加载初始内容 #import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> @property (weak, nonatomic) IBOutlet UIWebView *webView; @end -
-
使用JavaScriptCore实现OC和JS交互详解
JavaScriptCore JavaScriptCore是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境.iOS7后苹果在iPhone平台推出,极大的方便了我们对js的操作. 首先创建webView,读取本地的html文件 NSURL* htmlURL = [[NSBundle mainBundle] URLForResource: @"demo" withExtension: @"html"]; [_webView loadRequest:
-
IOS与网页JS交互详解及实例
IOS与网页JS交互 随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值.比如携程APP中一个热门景点的网页中,点击某个景点,可以跳转到原生中的该景点详情页控制器. 为此,我整理了三种最常用最便捷有效的OC与JS交互的方式,供大家学习交流. 第一种:JS给OC传值. 1. 技术方案:使用JavaScriptCore.framework框架 2. 使
-
Node.js API详解之 repl模块用法实例分析
本文实例讲述了Node.js API详解之 repl模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 repl repl(交互式解释器) 模块提供了一种"读取-求值-输出"循环(REPL)的实现,它可作为一个独立的程序或嵌入到其他应用中. 可以通过以下方式使用它: const repl = require('repl'); Node.js 自身也使用 repl 模块为执行 JavaScript 代码提供交互接口. 可以通过不带任何参数(或使用 -i 参数)地执行
-
Jquery揭秘系列:ajax原生js实现详解(推荐)
讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容.XMLHTTPRequest基本上算是标准化了,兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西,所以是为了兼容IE版本,我们用的只是它的xmlHTTP功能. 为了功能的明确和清晰,我们
-
Vue.js用法详解
vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前 言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V
-
基于webpack.config.js 参数详解
webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.
-
Node.js API详解之 querystring用法实例分析
本文实例讲述了Node.js API详解之 querystring用法.分享给大家供大家参考,具体如下: Node.js API详解之 querystring querystring模块提供了一些实用函数,用于解析与格式换URL查询字符串 通过 const querystring = require('querystring'); 的方式引用querystrings模块 目录: querystring.escape(str) querystring.unescape(str) querystri
-
Node.js API详解之 string_decoder用法实例分析
本文实例讲述了Node.js API详解之 string_decoder用法.分享给大家供大家参考,具体如下: string_decoder 模块提供了一个 API,用于把 Buffer 对象解码成字符串. 对于参数末尾不完整的多字节字符,string_decoder会将其保存在内部的buffer中,当再次解码时,补充到参数开头. 通过 const { StringDecoder } = require('string_decoder'); 的方式引用string_decoder模块. 目录:
-
Node.js API详解之 tty功能与用法实例分析
本文实例讲述了Node.js API详解之 tty功能与用法.分享给大家供大家参考,具体如下: tty 可以理解为终端的意思.tty 模块提供终端相关的接口,用来获取终端的行数列数等. 通过 const tty = require('tty'); 的方式引用 tty 模块 process.stdout.isTTY 说明: 此属性位于 process 模块,用来判断 Node.js 是否运行在一个 TTY 环境中 demo: console.log(process.stdout.isTTY) //