在APP加载的网页中，我们需要用到原生与JS 交互。本人做过的项目里有两种实现方式：A、用的是系统原生的方式实现。B、用的是第三方写的一个类库WebViewJavascriptBridge. 先就两种方式进行对比总结。
A、系统原生的方式实现
// 1. webview调用JS函数, JS代码可根据需要拼接好。
NSString *JSFunc = xxx;
[self.webView evaluateJavaScript:JSFunc completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"evaluateJavaScript:\n result = %@ error = %@",result, error);
}];
// 2. 网页JS调原生:
// 1> 需要先设置Webview. config 的WKUserContentController
// 2> 注册方法名 [userCC addScriptMessageHandler:self name:];
// 3> 遵守协议，实现其方法.
// 4> 在控制器销毁时，需要移除方法名注册
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userCC = [WKUserContentController new];
config.userContentController = userCC;
//JS调用OC 添加处理脚本
[userCC addScriptMessageHandler:self name:JSMessageName_Register];
WKWebView *webView = [[WKWebView alloc] initWithFrame:webFrame configuration:config];
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:JSMessageName_Register]) {
RegisterViewController *controller = [RegisterViewController new];
[self.navigationController pushViewController:controller animated:YES];
}
}
- (void)dealloc
{
WKUserContentController *userCC = self.webView.configuration.userContentController;
[userCC removeScriptMessageHandlerForName:JSMessageName_Register]; // 不移除，怕是会造成webview无法释放
}
这种方式下H5端该怎么做？
使用原生的交互方式的话，安卓端的交互不一致，需要H5端自己判断，比如：
//android终端或者uc浏览器
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
//ios终端
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X)/);
if(isiOS){
// 假设方法名为： JSMessageName；postMessage里面可以传参数
window.webkit.messageHandlers.JSMessageName.postMessage(['13300001111', 'Go Climbing This Weekend !!!'])
}else if(isAndroid){
.....
}
B、WebViewJavascriptBridge的方式
一、使用方式
// 1.JS调用原生：假设方法名是getUserInfo
[_bridge registerHandler:@"getUserInfo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[@"custName"] = [UserModel shareUserModel].custName;
dict[@"idCard"] = [UserModel shareUserModel].certifino;
responseCallback([JSONKit jsonStringWithObject:dict]);
}];
// 2. webview调用JS： 假设JS的方法名是redirect
[_bridge callHandler:@"redirect" data:@"test" responseCallback:^(id responseData) {
NSLog(@"%@", responseData);
}];
通过方法名与对应的操作放在一起的方式更有利于维护；除此之外，这个提供了一份JS模板文件，安卓端也可以是同样的原理实现。
二、实现原理
webview调用JS的原理
1.使用方法-(void)callHandler:data:responseCallback: 传递方法名、参数、block。
-> 2. 内部用字典将 block保存，然后将方法名、参数、保存block对应的key这些信息按照JS模板拼装好JS代码。
-> 3. 回调到主线程中使用[self.webView evaluateJavaScript:completionHandler:];方法调用JS。
-> 4. H5端收到这个调用之后，调用iframe实现对约定好的地址跳转CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE
//iframe可以理解为webview中的窗口，当我们改变iframe的src属性的时候，相当于我们浏览器实现了链接的跳转。比如从www.baidu.com跳转到www.google.com。下面这段代码的目的就是实现一个到https://__bridge_loaded__的跳转
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
document.documentElement.appendChild(WVJBIframe);
-> 5. 在跳转时，我们的webview会收到代理方法回调, 在这里做出对URL判断是否是我们约定好的协议头，如果是约定好的JS与原生交互的就进入交互处理。
- (void)webView:(WKWebView *)webView
decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSURL *url = navigationAction.request.URL;
if ([_base isCorrectProcotocolScheme:url]) {// 是否是约定好的协议头
if ([_base isBridgeLoadedURL:url]) {// 是否是将桥接JS代码加载到网页的对应的url
[_base injectJavascriptFile];// js代码注入
} else if ([_base isQueueMessageURL:url]) {// 是否是JS与原生交互的url
NSLog(@"JS与原生交互原理的地方");
[self WKFlushMessageQueue];
} else {// 是约定好的协议头，但是未知的url
[_base logUnkownMessage:url];
}
decisionHandler(WKNavigationActionPolicyCancel);// 因为这里是处理交互不需要加载
return;
}
......
}
-> 6. 主动调用JS代码，从而获取响应的数据result.
NSString *js = @"WebViewJavascriptBridge._fetchQueue();";
[_webView evaluateJavaScript:js completionHandler:^(NSString* result, NSError* error) {
[_base flushMessageQueue:result];
}];
-> 7.对响应的数据result进行处理, 从中得到我们保存在字典中相应的block调用（ _responseCallbacks[responseId]）。
id messages = [self _deserializeMessageJSON: result];
NSString* responseId = message[@"responseId"];
if (responseId) {
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
}
JS调用原生的原理
- JS调用原生时，首先我们会在webview的代理方法里面收到，还是原来的方法, 判断是否是交互的操作跟上面的一样, 下面是缩减后的代码。
- (void)webView:(WKWebView *)webView
decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
if ([_base isQueueMessageURL:url]) {// 是否是JS与原生交互的url
NSLog(@"JS与原生交互原理的地方");
[self WKFlushMessageQueue];
decisionHandler(WKNavigationActionPolicyCancel);
}
}
-> 2. 主动调用JS代码，从而获取响应的数据result.
NSString *js = @"WebViewJavascriptBridge._fetchQueue();";
[_webView evaluateJavaScript:js completionHandler:^(NSString* result, NSError* error) {
[_base flushMessageQueue:result];
}];
-> 3. 对这个result进行处理。
- (void)flushMessageQueue:(NSString *)messageQueueString{
id messages = [self _deserializeMessageJSON:messageQueueString];
WVJBResponseCallback responseCallback = NULL;
NSString* callbackId = message[@"callbackId"];
if (callbackId) {
// 调用原生方法时的参数中有 callbackId，则需要我们在使用时的那个block中手动调用这个responseCallback。
responseCallback = ^(id responseData) {
if (responseData == nil) { responseData = [NSNull null]; }
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];// 里面会再次使weview调用js给网页传递数据‘ responseData’
};
} else {
responseCallback = ^(id ignoreResponseData) {
// Do nothing
};
}
//self.messageHandlers的来源： - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler。
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
handler(message[@"data"], responseCallback);
}
附：第三种方式：
OC与JS交互之JavaScriptCore