iOS交互一般有两个选择
- JavaScriptCore
- OC调用JavaScript通过webview的stringByEvaluatingJavaScriptFromString:方法调用JavaScript代码；JavaScript调用OC，则是通过web view的代理方法shouldStartLoadWithRequest：来接收JavaScript的网络请求从而实现调用，推荐Marcus Westin的开源框架 WebViewJavascriptBridge。
在ios7之后，苹果开放了JavaScriptCore，让Objective-C和JavaScript代码直接的交互变得更加的简单方便。这里就说说如何使用JavaScriptCore进行交互。
iOS开发使用JavaScriptCore进行交互有两种方式：遵循JSExport协议，使用block。对JavaScriptCore不熟悉的看这篇挺不错的iOS7新JavaScriptCore框架入门介绍
先设定一个交互的使用需求背景：
假如有这样一个需求：点击网页上的按钮，调用本地代码，然后本地代码调用网页js的方法改变按钮样式，点击这里看动图展示。
oc端
-
导入JavaScriptCore
#import <JavaScriptCore/JavaScriptCore.h> -
JSExport方式：
继承JSExport协议， 在协议中定义自己的方法，在需要交互的ViewController遵循此协议并实现协议中的方法。该协议的方法会暴露给js调用，也就是网页所调用本地的方法就是协议中的方法。
下面定义一继承至JSExport的协议，名为jsObjDelegate的协议
@protocol jsObjDelegate <JSExport>
-(void)test:(NSString *)str;
@end
创建一个类，包含两个个属性。一个是加载网页的webView，另一个是js的运行环境JSContext
@interface webViewController ()<jsObjDelegate,UIAlertViewDelegate,UIWebViewDelegate>{
UIWebView * _webView;
JSContext * _jsContext;
}
实现协议中的方法
-(void)test:(NSString *)str{
UIAlertView * al = [[UIAlertView alloc]initWithTitle:@"网页成功调用OC！" message:str delegate:self cancelButtonTitle:@"yes" otherButtonTitles:@"no", nil];
al.tag = 3001;
[al show];
}
在viewDidLoad里面vebView加载本地html
NSURL *fileURL = [[NSBundle mainBundle] URLForResource:@"two.html" withExtension:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:fileURL];
[_webView loadRequest:request];
在vebView加载完成后，获取网页的javaScriptContext属性并保存到_jsContext中，把当前控制器保存到网页的javaScriptContext中，名为“ ctrl”，至此网页用"ctrl"这个对象就能直接调用到协议中的test方法
-(void)webViewDidFinishLoad:(UIWebView *)webView{
_jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//把当前控制器保存到网页中
_jsContext[@"ctrl"] = self;
_jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
网页调用协议中暴露的test方法
ctrl.test("方式：直接调用 \n是否回调网页方法")
- Block方式
block方式viewController无需实现jsObjDelegate协议，在加载网页完成时候 向网页中的javaScriptContext注入方法即可。这里注入的方法名为“test2” 。在网页中JS直接调用test2就能进入block里面调用co代码
-(void)webViewDidFinishLoad:(UIWebView *)webView{
_jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
_jsContext[@"ctrl"] = self;
_jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
WS(weakSelf);
_jsContext[@"test2"]=^(NSString * string){
// NSArray * arr = [JSContext currentArguments ];
// JSValue * value = arr[0];
// NSString * str = [value toString];
// thread = [NSThread currentThread];
UIAlertView * al = [[UIAlertView alloc]initWithTitle:@"网页成功调用OC！" message:string delegate:weakSelf cancelButtonTitle:@"yes" otherButtonTitles:@"no", nil];
al.tag = 3000;
[al show];
};
}
网页调用oc中注入的test2方法
test2("方式：block \n是否回调网页方法")
oc调用网页的方法,向js的同一个方法传入不同的参数
-(void)callback{
JSValue * callback = _jsContext[@"showMessage"];
[callback callWithArguments:@[@"oc调用html方法 \n是否改变第一个按钮的背景颜色",@(1)]];
}
-(void)callback2{
JSValue * callback = _jsContext[@"showMessage"];
[callback callWithArguments:@[@"oc调用html方法 \n是否改变第二个按钮的背景颜色",@(2)]];
}
网页端
这里是完整的js代码，通过jsObjDelegate协议和block方式调用本地代码的调用方式都在这里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iOS与js的交互</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>iOS与js的交互</hi><br>
<div>
<input id="btn1" type="button" value="JSExport协议调用oc代码"/><br>
<input id="btn2" type="button" value="Block调用oc代码"/>
</div>
<script type="text/javascript">
$(function(){
$("#btn1").bind("click", function(){
//给btn1绑定事件，ctrl是上面保存的控制器。这里直接调用 jsObjDelegate暴露出来方法
ctrl.test("方式：直接调用 \n是否回调网页方法")
});
$("#btn2").bind("click",function(){
//btn2绑定事件，这里直接调用oc中以block方式注入的方法
test2("方式：block \n是否回调网页方法")});
})
//根据index的值修改按钮的样式。oc代码会调用该方法
function showMessage(str,index){
if(index == 1 && confirm(str)){
$("#btn1").css("background-color","red");
return;
}
if(confirm(str)){
$("#btn2").css("background-color","green");
}
}
</script>
</body>
</html>
网友评论