iOS Native 和 JS 交互的几种方式
iOS Native和JS交互的四种方式：
1，拦截URL（适用于 UIWebView和WkWebView）；
2，JavascriptCore（只适用于UIWebView，iOS7+）；
3，WKScriptMessageHandler（只适用于WKWebView， iOS8+）；
4，WebViewJavascriptBridge（使用与UIWebView 和 WKWebView，属于第三方框架）。
方法一 拦截URL
（a) web调用原生：
<1>和后端同事协定好协议，如esign://scan表示启动二维码扫描，esign://location表示获取定位。
<2>实现UIWebView代理的shouldStartLoadWithRequest:navigationType:方法，在方法中对url进行拦截，如果是步奏<1>中定义好的协议则执行对应原生代码，返回NO，否则返回YES继续加载原url。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
if ([request.URL.absoluteString hasPrefix:@"jxaction://scan"]) {
//调用原生的业务代码
return NO;
}
return YES;
}
H5的代码：
<a href="esign://scan">扫一扫(拦截url) </a>
（b）原生调用js
若(a)中扫描二维码结束后，需要把扫描结果返回给web页，直接调用UIWebView的stringByEvaluatingJavaScriptFromString:方法，或者WKWebView的 evaluateJavaScript:completionHandler:方法。
[self.webView stringByEvaluatingJavaScriptFromString:@"scanResult('我是扫描结果~')"];
方式二 JavaScriptCore
方式一 web调用原生只适合简单的调用，如果要传递参数，虽然也可以拼接在url上，如esign://scan?method=aaa，但是需要我们自行对字符串进行分割解析，并且特殊字符需要编码。在iOS7系统提供了JavaScriptCore，可以更优雅地实现js与原生的交互。
（a）js调用原生
<1>新建类继承自NSObject（如AppJSObject）。
<2>.h文件中声明一个代理并遵循JSExport，代理内的方法和js定义的方法名一致。
<3>.m文件中实现<2>代理中对应的方法，可以在方法内处理事件或通知代理。
AppJSObject.h
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol AppJSObjectDelegate <JSExport>
-(void)scan:(NSString *)message;
@end
@interface AppJSObject : NSObject<AppJSObjectDelegate>
@property(nonatomic,weak) id<AppJSObjectDelegate> delegate;
@end
AppJSObject.m
#import "AppJSObject.h"
@implementation AppJSObject
-(void)scan:(NSString *)message{
[self.delegate scan:message];
}
@end
H5代码：
<input type="button" name="" value="扫一扫" onclick="scan()">
<br/>
<p id="result">扫描结果：</p>
<script type="text/javascript">
//调用APP的扫描方法 h5->app
function scan(){
app.scan('scanResult');
}
//扫描结果回调方法app->h5
function scanResult(result){
document.getElementById("result").innerHTML = '扫描结果：' + result;
}
</script>
<4>在UIWebView加载完成的代理中把AppJSObject实例对象类注入到JS中，那么在js中调用方法就会调用到原生AppJSObject实例对象中对应的方法了。
-(void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
AppJSObject *jsObject = [AppJSObject new];
jsObject.delegate = self;
context[@"app"] = jsObject;
//另一种方法 用block的方式
//创建JSContext 对象
JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//js调用iOS
//第一种情况
//其中scan就是js的方法名称，赋给是一个block 里面是iOS代码
context[@"app"] = self;
id obj = context[@"app"];
obj[@"scan"] = ^(NSString *sde){
NSLog(@"js调用oc打开相册__%@",sde);
//JSContext *context=[self.mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS = [NSString stringWithFormat:@"scanResult('%@')",@"我是扫描结果"]；//准备执行的js代码
//[context evaluateScript:alertJS]；
//通过oc方法调用js
dispatch_async(dispatch_get_main_queue(), ^{
[webView stringByEvaluatingJavaScriptFromString:alertJS];
});
// NSArray *args = [JSContext currentArguments];
// for (id obj in args) {
// NSLog(@"%@",obj);//
}
};
}
（2）原生调用js
可以通过一中的方法，也可以通过JSContext：
JSContext *context = [_mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS = [NSString stringWithFormat:@"%@('%@')",_photoMethod,fileUrl];
[context evaluateScript:alertJS];
// [webView stringByEvaluatingJavaScriptFromString:alertJS];
方式三 WKScriptMessageHandler
WKWebView是Apple在iOS8推出的Webkit框架中的负责网页的渲染与展示的类，相比UIWebView速度更快，占用内存更少，支持更多的HTML特性。WKScriptMessageHandler是WebKit提供的一种在WKWebView上进行JS消息控制的协议。
大多App都是支持iOS8+，很多人使用WKWebView代替了UIWebView，但是WKWebView并不支持方式二。此时我们可以使用WKWebView的WKScriptMessageHandler。
（1）JS调用iOS：
初始化WKWebView时，调用addScriptMessageHandler:name:方法，name为js中的方法名，如esign:
- (void)setupWKWebView{
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = [[WKUserContentController alloc] init];
[configuration.userContentController addScriptMessageHandler:self name:@"esign"];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
webView.UIDelegate = self;
}
#pragma mark - WKScriptMessageHandler
//! WKWebView收到ScriptMessage时回调此方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name caseInsensitiveCompare:@"esign"] == NSOrderedSame) { [WKWebViewWKScriptMessageHandlerController showAlertWithTitle:message.name message:message.body cancelHandler:nil];
}
}
实现原理：
1、JS与iOS约定好esign方法，用作JS在调用iOS时的方法；
2、iOS使用WKUserContentController的-addScriptMessageHandler:name:方法监听name为esign的消息；
3、JS通过window.webkit.messageHandlers.esign.postMessage()的方式对esign方法发送消息；
4、iOS在-userContentController:didReceiveScriptMessage:方法中读取name为esign的消息数据message.body。
PS：[userContentController addScriptMessageHandler:self name:@"esign"]会引起循环引用问题。一般来说，在合适的时机removeScriptMessageHandler可以解决此问题。比如：在-viewWillAppear:方法中执行add操作，在-viewWillDisappear:方法中执行remove操作。如下：
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[_webView.configuration.userContentController addScriptMessageHandler:self name:@"esign"];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[_webView.configuration.userContentController removeScriptMessageHandlerForName:@"esign"];
}
（2）iOS调用JS：
是通过WKWebView的evaluateJavaScript:completionHandler:方法来实现的。
方式四 WebViewJavascriptBridge
是一个第三方框架，官方文档和demo都很完整 GitHub地址：
