简介
iOS原生应用和web页面的交互大致上有以下这几种方法：
- JavaScriptCore（iOS7之后）
- 拦截协议
- 第三方框架WebViewJavaScriptBridge
- WKWebView（iOS8之后）
iOS 7之前
Objective-C调用JavaScript代码
iOS7以前，Objective-C调用JavaScript的方式只有一种，就是通过UIWebView对象的stringByEvaluatingJavaScriptFromString:方法（同步的），该方法向UIWebView传递一段需要执行的JavaScript代码最后获取执行结果。
如：
// 获取当前页面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
// 获取当前页面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
“JavaScript调用Objective-C”(异步的)
JavaScript语言调用Objective-C语言，并没有现成的API，但是有些方法可以达到相应的效果。也就是“拦截协议”。具体是利用UIWebView的特性：在UIWebView的内发起的所有网络请求，都可以通过delegate函数得到通知。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
该方法可以监听到UIWebView中发出的URL请求，通过与H5协商一个URL通信协议，来拦截指定的URL，做相应的操作，并阻止此链接的跳转。
例：
html代码
测试网页
点击链接
OC代码
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
if([[url scheme] isEqualToString:@"devzeng"]) {
//处理JavaScript和Objective-C交互
if([[url host] isEqualToString:@"login"])
{
//获取URL上面的参数
NSDictionary *params = [self getParams:[url query]];
BOOL status = [self login:[params objectForKey:@"name"] password:[params objectForKey:@"password"]];
if(status)
{
//调用JS回调
[webView stringByEvaluatingJavaScriptFromString:@"alert('登录成功!')"];
}
else
{
[webView stringByEvaluatingJavaScriptFromString:@"alert('登录失败!')"];
}
}
return NO;
}
return YES;
}
第三方框架WebViewJavaScriptBridge
WebViewJavascriptBridge是基于拦截协议进行的封装
JavaScriptCore框架
深入浅出 JavaScriptCore
iOS下JS与OC互相调用（四）--JavaScriptCore
常见几个类说明
- JSContext：代表JS的执行环境，通过evaluateScript:方法就可以执行JS方法。
- JSValue：封装了JS与ObjC中对应的模型，以及调用JS的API等。
- JSExport：一个协议，通过遵守此协议，可以定义我们自己的协议，在协议中声明的API都会在JS中暴露出来，能被JS调用。
- JSManagedValue：管理数据和方法的类。
- JSVirtualMachine：处理线程相关，使用较少。
Objective-C调用JavaScript
/**
* 网页加载完毕时被调用
*/
- (void)webViewDidFinishLoad:(UIWebView *)webView{
// 获取当前JS执行环境
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS = @"alert('Hello JS!')"; //准备执行的JS代码
// 通过evaluateScript:方法调用JS的alert
[context evaluateScript:alertJS];
}
JavaScript 调用 Objective-C
- js里面直接调用方法
例1
-(void)webViewDidStartLoad:(UIWebView *)webView{
//首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）注意：WKWebView是获取不到JSContext的
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//其中getCurrentUser就是js的方法名称，赋给是一个block 里面是iOS代码
context[@"getCurrentUser"] = ^() {
//在block中写OC代码
return [[NSUserDefaults standardUserDefaults]objectForKey:@"MYJSANDOC"];
};
context[@"encodeParam"] = ^() {
NSArray *args = [JSContext currentArguments];
NSString *param = [NSString stringWithFormat:@"%@",args[0]];
NSString *result = [[[YXBaseRequestManager alloc]init]encryptUseAES:param key:@"1%7jhs#Zjasd&tr*"];
return result;
};
}
例2
html代码
objc代码
// 网页加载完毕时被调用
-(void)webViewDidFinishLoad:(UIWebView *)webView{
// 获取当前JS执行环境
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 直接调用JS代码
context[@"log"] = ^(){
// 取出JS方法的参数
NSArray *args = [JSContext currentArguments];
for (id obj in args) {
NSLog(@"%@",obj); // 打印JS方法接收到的所有参数
}
};
}
- js里面通过对象调用方法
第一步：需要声明一个与JS进行交互的协议（NativeApisProtocol），要求该协议遵守JSExport协议。
第二步：新建一个模型（NativeAPIs），要求该模型遵守NativeApisProtocol协议。一般而言，需要在NativeAPIs模型中声明一个JSContext属性，便于与JS交互。
第三步：实现该模型（NativeAPIs），即在NativeAPIs.m文件中实现NativeApisProtocol协议中定义的方法。
第四步：在ViewController.m的-webViewDidFinishLoad:方法中获取当前JS执行环境（self.jsContext），然后将NativeAPIs模型注入到JS执行环境。
例：
OC代码
/*-- NativeAPIs.h ---*/
#import
#import
#import
// 声明与JS交互的协议
@protocol NativeApisProtocol // 遵守JSExport协议
// 调用系统相机
-(void)callCamera;
// 调用系统分享
-(void)share:(NSString *)shareInfo;
// 打开宁波手机阅读
-(void)openNBPhoneReader;
@end
@interface NativeAPIs : NSObject
@property(weak, nonatomic) JSContext *jsContext;
@end
/*-- NativeAPIs.m --*/
/*-- 省略--*/
// ViewController.m
/*-- 省略前面的代码 --*/
#pragma mark - UIWebViewDelegate
-(void)webViewDidFinishLoad:(UIWebView *)webView{
NSLog(@"网页加载完毕------");
// 获取JS上下文运行环境
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NativeAPIs *nativeAPIs = [[NativeAPIs alloc] init];
// 将NativeAPIs模型注入JS
self.jsContext[@"NativeApis"] = nativeAPIs;
nativeAPIs.jsContext = self.jsContext;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息: %@", exceptionValue);
};
}
html代码
/*-- 省略无关紧要的代码，具体见Demo --*/
WKWebView
iOS8以后，苹果推出了新框架Wekkit，提供了替换UIWebView的组件WKWebView。
先看下 WKWebView的特性：
- 在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存，模拟器加载百度与开源中国网站时，WKWebView占用23M，而UIWebView占用85M）；
- 允许JavaScript的Nitro库加载并使用（UIWebView中限制）；
- 支持了更多的HTML5特性；
- 高达60fps的滚动刷新率以及内置手势；
- 将UIWebViewDelegate与UIWebView重构成了14类与3个协议（查看苹果官方文档）；
参考
iOS开发--iOS与JS交互的几种方式
iOS中JavaScript和OC交互
Objective-C与JavaScript交互的那些事