跟原生开发相比，H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势，至少不用等待审核。那么问题来了，H5与本地原生代码势必要有交互的，比如本地上传一些信息，H5打开本地的页面，打开本地进行微信等第三方分享等，今天就简单讲一下iOS中本地UIWebView,WKWebView与H5的交互。
DEMO地址：点击下载
##UIWebView的交互
###stringByEvaluatingJavaScriptFromString的使用
UIWebView在2.0时代就有的类，一直到现在（目前9.x）都可以使用的WEB容器，它的方法很简单，在iOS7.0之前JS交互的方法只有一个stringByEvaluatingJavaScriptFromString:
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
使用stringByEvaluatingJavaScriptFromString方法，需要等UIWebView中的页面加载完成之后去调用.
以下是简单的使用场景：
1、获取当前页面的url。
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}
2、获取页面title：
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
}
3、修改界面元素的值。
NSString *js_result = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='iOS';"];
4、表单提交：
NSString *js_result2 = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];
这样就实现了在google搜索关键字：“iOS”的功能。
5、插入js代码
上面的功能我们可以封装到一个js函数中，将这个函数插入到页面上执行，代码如下：
"script.type = 'text/javascript';"
"script.text = \"function myFunction() { "
"var field = document.getElementsByName('q')[0];"
"field.value='iOS';"
"document.forms[0].submit();"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];
看上面的代码：
a、首先通过js创建一个script的标签，type为'text/javascript'。
b、然后在这个标签中插入一段字符串，这段字符串就是一个函数：myFunction，这个函数实现google自动搜索关键字的功能。
c、然后使用stringByEvaluatingJavaScriptFromString执行myFunction函数。
6、直接调用JS函数
上面的函数调用是本地注入到H5中，然后本地调用的，那么如果H5中就有原生的JS函数:myFunction();，那么我们就可以直接执行:
[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];
###JavaScriptCore框架的使用
我们会发现stringByEvaluatingJavaScriptFromString的方法调用太笨拙,在iOS7.0中苹果公司增加了JS利器JavaScriptCore框架,框架让Objective-C和JavaScript代码直接的交互变得更加的简单方便。该框架其实只是基于webkit中以C/C++实现的JavaScriptCore的一个包装。其本身是可以单独作为一个开发库来使用，框架中有完整的数据计算逻辑，今天只讲H5与本地交互，所以不作涉及，有兴趣可以参考:iOS7新JavaScriptCore框架入门介绍。
JavaScriptCore提供了很多灵活的本地OC与JS的交互方式，通过JSContext和JSValue来完成的，JSContext是一个WebView中js代码运行环境，所有的JS交互都要通过- (JSValue *)evaluateScript:(NSString *)script;方法就可以执行一段JavaScript脚本。
JSValue则可以说是JavaScript和Object-C之间互换的桥梁，它提供了多种方法可以方便地把JavaScript数据类型转换成Objective-C.
具体如何交互我们先来看一段H5代码:
<!DOCTYPE html>
<html>
<head>
<title>测试iOS与JS之前的互调</title>
<style type="text/css">
* {
font-size: 40px;
}
</style>
<script type="text/javascript">
function showAppAlertMsg(message){
alert(message);
}
</script>
</head>
<body>
<div style="margin-top: 100px">
<h1>Test how to use objective-c call js</h1>
<input type="button" value="Call ObjC system camera" onclick="callSystemCamera()">
<input type="button" value="Call ObjC system alert" onclick="showAlertMsg('js title', 'js message')">
</div>
<div>
<input type="button" value="Call ObjC func with JSON " onclick="callWithDict({'name': 'testname', 'age': 10, 'height': 170})">
<input type="button" value="Call ObjC func with JSON and ObjC call js func to pass args." onclick="jsCallObjcAndObjcCallJsWithDict({'name': 'testname', 'age': 10, 'height': 170})">
</div>
<div>
<span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>
</div>
</body>
</html>
我们可以看出其中H5实现的JS代码如下:
<script type="text/javascript">
function showAppAlertMsg(message){
alert(message);
}
</script>
函数showAppAlertMsg是H5实现可以由我们本地主动调用的。那么相对应的H5主动调用的方法是:
<input type="button" value="Call ObjC system camera" onclick="callSystemCamera()">
其中callSystemCamera()是H5调用的函数，我们可以看到在HTML代码中是找不到这个函数的实现的，因为这个函数是需要我们本地去实现。
接下来我们就讲一下我们本地如何调用由H5实现的函数showAppAlertMsg,本地如何实现能够右H5端调用的方法:
1.在页面加载完成之后获取JS运行环境JSContext
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}
2.利用evaluateScript声明函数并传递参数执行代码
JSValue *jsValue = [jsContext evaluateScript:@"showAppAlertMsg"];
[jsValue callWithArguments:@[@"这是app本地交互文案"]];
第一行代码是声明一个函数showAppAlertMsg，第二行是传递参数并执行代码callWithArguments.
以上是主动调用H5实现的函数，也可以称之为传递数据给H5。
本地实现能够让H5调用的函数:
// 也可以通过下标的方式获取到方法
self.jsContext[@"callSystemCamera"] = ^(){
NSLog(@"callSystemCamera");
};
self.jsContext[@"showAlertMsg"] = ^(NSString *title, NSString *message){
NSLog(@"callSystemCamera");
};
self.jsContext[@"callWithDict"] = ^(id jsonDic){
NSLog(@"callWithDict%@",jsonDic);
};
一目了然，通过Block传递参数和方法。
上面是利用JavaScriptCore的最基本的方法实现JS调用，还有另外一种方案利用JSExport协议进行交互.其实可以理解为通过JSExport协议实现一种把本地的实例绑定为H5中的一个对象，通过这个对象调用本地实例方法的一种交互设计。
该设计在H5端与上面的是不一样的：
<input type="button" value="Call ObjC system camera" onclick="OCModel.callSystemCamera()">
<input type="button" value="Call ObjC system alert" onclick="OCModel.showAlertMsg('js title', 'js message')">
我们会发现 与之前的H5代码相比 多了一个 OCModel,这个在JS中可以理解为一个对象，点击按钮之后调用对象OCModel中的函数OCModel.callSystemCamera,那么该对象如何由本地绑定呢。
1.首先声明一个JSExport协议,该协议需要声明刚才H5中的函数:
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JavaScriptObjectiveCDelegate <JSExport>
// JS调用此方法来调用OC的系统相册方法
- (void)callSystemCamera;
// 在JS中调用时，函数名应该为showAlertMsg(arg1, arg2)
// 这里是只两个参数的。
- (void)showAlert:(NSString *)title msg:(NSString *)msg;
// 通过JSON传过来
- (void)callWithDict:(NSDictionary *)params;
// JS调用Oc，然后在OC中通过调用JS方法来传值给JS。
- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params;
@end
2.新建一个类，该类实现上面的协议
@interface NLJsObjCModel : NSObject <JavaScriptObjectiveCDelegate>
@property (nonatomic, weak) JSContext *jsContext;
@property (nonatomic, weak) UIWebView *webView;
@end
实现文件:
#import "NLJsObjCModel.h"
@implementation NLJsObjCModel
- (void)callWithDict:(NSDictionary *)params {
NSLog(@"Js调用了OC的方法，参数为：%@", params);
}
// Js调用了callSystemCamera
- (void)callSystemCamera {
NSLog(@"JS调用了OC的方法，调起系统相册");
// JS调用后OC后，又通过OC调用JS，但是这个是没有传参数的
JSValue *jsFunc = self.jsContext[@"jsFunc"];
[jsFunc callWithArguments:nil];
}
- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params {
NSLog(@"jsCallObjcAndObjcCallJsWithDict was called, params is %@", params);
// 调用JS的方法
JSValue *jsParamFunc = self.jsContext[@"jsParamFunc"];
[jsParamFunc callWithArguments:@[@{@"age": @10, @"name": @"lili", @"height": @158}]];
}
- (void)showAlert:(NSString *)title msg:(NSString *)msg {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *a = [[UIAlertView alloc] initWithTitle:title message:msg delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];
[a show];
});
}
@end
3.将NLJsObjCModel实例对象绑定到JS中:
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 通过模型调用方法，这种方式更好些。
NLJsObjCModel *model = [[NLJsObjCModel alloc] init];
self.jsContext[@"OCModel"] = model;
model.jsContext = self.jsContext;
model.webView = self.webView;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
到此结束，H5按钮点击之后就可以通过JSExport协议传递跟本地对象，本地对象就能收到相应。
###WKWebView的交互使用
iOS8以后，苹果推出了新框架Wekkit，提供了替换UIWebView的组件WKWebView。
先看下 WKWebView的特性：
- 在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存，模拟器加载百度与开源中国网站时，WKWebView占用23M，而UIWebView占用85M）；
- 允许JavaScript的Nitro库加载并使用（UIWebView中限制）；
- 支持了更多的HTML5特性；
- 高达60fps的滚动刷新率以及内置手势；
- 将UIWebViewDelegate与UIWebView重构成了14类与3个协议（查看苹果官方文档）；
####WKWebView 的使用呢与UIWebView相同，不同的是回调和代理方法.这里简单介绍一下.
## WKNavigationDelegate
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
####页面跳转的代理方法：
// 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
####新的 WKUIDelegate协议
这个协议主要用于WKWebView处理web界面的三种提示框(警告框、确认框、输入框)，下面是警告框的例子:
/**
* web界面中有弹出警告框时调用
*
* @param webView 实现该代理的webview
* @param message 警告框中的内容
* @param frame 主窗口
* @param completionHandler 警告框消失调用
*/
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;
####动态加载并运行JS代码(WKUserScript)
用于在客户端内部加入JS代码，并执行，示例如下
// 图片缩放的js代码
NSString *js = @"var count = document.images.length;for (var i = 0; i < count; i++) {var image = document.images[i];image.style.width=320;};window.alert('找到' + count + '张图');";
// 根据JS字符串初始化WKUserScript对象
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
// 根据生成的WKUserScript对象，初始化WKWebViewConfiguration
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
[_webView loadHTMLString:@"<head></head><imgea src='http://www.nsu.edu.cn/v/2014v3/img/background/3.jpg' />"baseURL:nil];
[self.view addSubview:_webView];
五、webView 执行JS代码
用户调用用JS写过的代码，一般指服务端开发的：
//javaScriptString是JS方法名，completionHandler是异步回调block
[self.webView evaluateJavaScript:javaScriptString completionHandler:completionHandler];
六、JS调用App注册过的方法
在WKWebView里面注册供JS调用的方法，是通过WKUserContentController类下面的方法：
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;
scriptMessageHandler是代理回调，JS调用name方法后，OC会调用scriptMessageHandler指定的对象。
JS在调用OC注册方法的时候要用下面的方式：
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
注意，name(方法名)是放在中间的，在这里个人理解该name可以理解为一个标识，该标识将OC本地的实例对象绑定到JS中，将messageBody只能是一个对象，如果要传多个值，需要封装成数组，或者字典。整个示例如下：
//OC注册供JS调用的方法
[[_webView configuration].userContentController addScriptMessageHandler:self name:@"app"];
//OC在JS调用方法做的处理
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"JS 调用了 %@ 方法，传回参数 %@",message.name,message.body);
}
//JS调用
window.webkit.messageHandlers.app.postMessage(null);
##最后：
简单做一个总结,在iOS7以前我们只能使用UIWebView,所以在js交互中只能通过stringByEvaluatingJavaScriptFromString进行本地调用H5，而H5端调用本地多采用URLSchemes方式（解耦---Hybrid H5跨平台性思考），
iOS7之后使用UIWebView则可以使用JavaScriptCore框架，通过JSContext进行JS交互。
iOS8之后可以使用WKWebView本身的框架，毕竟WKWebView本身已经优化很多，并且提供了更多的方法和协议，不过注意一点的是在WKWebView中鉴于一些线程和进程的问题是无法获取JSContext的。
