序言
使用WKWebView的時候，如果想要實現JS調用OC方法，除了攔截URL之外，還有一種簡單的方式。那就是利用WKWebView的新特性MessageHandler來實現JS調用原生方法。
一. MessageHandler 是什么？
WKWebView初始化時，有一個參數叫configuration，它是WKWebViewConfiguration類型的參數，而WKWebViewConfiguration有一個屬性叫WKWebViewConfiguration,它是WKUserContentController類型的參數。WKUserContentController對象有一個方法- addScriptMessageHandler:name:，這個功能就簡稱MessageHandler。
- addScriptMessageHandler:name:有兩個參數，第一個參數是userContentController的代理對象，第二個參數是JS里發送postMessage的對象。
所以要使用MessageHandler功能，就必須要實現WKScriptMessageHandler協議。
二. 怎么使用MessageHandler？
2.1 創建WKWebViewConfiguration對象，配置各個API對應的MessageHandler。
WKUserContentController對象可以添加多個scriptMessageHandler。
示例代碼如下
初始化WKWebViewConfiguration和WKWebView
- (void)drawUI {
// WKWebViewConfiguration
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKPreferences *preference = [WKPreferences new];
preference.javaScriptCanOpenWindowsAutomatically = YES;
preference.minimumFontSize = 40.0;
configuration.preferences = preference;
// WKWebView
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
[self.webView loadFileURL:fileURL allowingReadAccessToURL:fileURL];
self.webView.navigationDelegate = self;
self.webView.UIDelegate = self;
[self.view addSubview:self.webView];
}
然后在界面即將顯示的時候添加MessageHandler
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// addScriptMessageHandler 很容易導致循環引用
// 控制器 強引用了WKWebView,WKWebView copy(強引用了）configuration， configuration copy （強引用了）userContentController
// userContentController 強引用了 self （控制器）
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"ScanAction"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Location"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Color"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Pay"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Shake"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"GoBack"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"PlaySound"];
}
需要注意的是addScriptMessageHandler很容易引起循環引用，導致控制器無法被釋放，所以需要移除MessageHandler
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
// 因此這里要記得移除handlers
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"ScanAction"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Location"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Share"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Color"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Pay"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Shake"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"GoBack"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"PlaySound"];
}
2.2 實現協議方法
這里實現了兩個協議<WKUIDelegate,WKScriptMessageHandler>，WKUIDelegate是因為我在JS中彈出了alert 。WKScriptMessageHandler是因為我們要處理JS調用OC方法的請求。
示例代碼如下
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
// message.body -- Allowed types are NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull.
if ([message.name isEqualToString:@"ScanAction"]) {
[self scanAction];
} else if ([message.name isEqualToString:@"Location"]) {
[self getLocation];
} else if ([message.name isEqualToString:@"Share"]) {
[self shareWithParams:message.body];
} else if ([message.name isEqualToString:@"Color"]) {
[self changeBGColor:message.body];
}else if ([message.name isEqualToString:@"GoBack"]) {
[self goBack];
}
}
WKScriptMessage有兩個關鍵屬性name 和 body。
因為我們給每一個OC 方法取了一個name，那么我們就可以根據name 來區分執行不同的方法。body 中存著JS 要給OC 傳的參數。
關于參數body 的解析，我就舉一個body中放字典的例子，其他的稍后可以看demo。
解析JS 調用OC 實現分享的參數：
- (void)shareWithParams:(NSDictionary *)params {
if (![params isKindOfClass:[NSDictionary class]]) {
return;
}
NSString *title = [params objectForKey:@"title"];
NSString *content = [params objectForKey:@"content"];
NSString *url = [params objectForKey:@"url"];
// 在這里執行分享的操作
NSLog(@"在這里執行分享的操作");
// 將分享結果返回給js
NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id result, NSError *error) {
NSLog(@"%@----%@",result, error);
}];
}
message.boby 就是JS 里傳過來的參數。我們不同的方法先做一下容錯性判斷。然后正常取值就可以了。
2.3 處理HTML中JS調用
下面只列舉一個shareClick()方法，其他看Demo
// 傳字典
function shareClick(){
window.webkit.messageHandlers.Share.postMessage({title:'測試分享的標題',content:'測試分享的內容',url:'http://www.baidu.com'});
}
function shareResult(channel_id,share_channel,share_url) {
var content = channel_id+","+share_channel+","+share_url;
asyncAlert(content);
document.getElementById("returnValue").value = content;
}
function asyncAlert(content) {
setTimeout(function(){
alert(content);
},1);
}
2.4 OC調用JS
這里使用WKWebView 實現OC 調用JS方法與之前說的文章一樣，通過- evaluateJavaScript:completionHandler:
示例代碼如下：
// 將分享結果返回給js
NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
三. 使用MessageHandler的好處
- 1.在JS中寫起來簡單，不用再用創建URL的方式那么麻煩了。
- 2.JS傳遞參數更方便。使用攔截URL的方式傳遞參數，只能把參數拼接在后面，如果遇到要傳遞的參數中有特殊字符，如&、=、？等，必須得轉換，否則參數解析肯定會出錯。
效果圖如下圖所示
本文參考iOS下JS與OC互相調用（三）--MessageHandler，非常感謝該作者。
更多 JS 與 OC 交互文章請看下面
iOS下 JS 與OC 互相調用(一) - UIWebView 攔截 URL
iOS下 JS 與OC 互相調用(二) - JavaScriptCore
iOS 下 JS 與 OC 互相調用(三) - WKWebView 攔截 URL
iOS下 JS 與 OC 互相調用(五) - UIWebView+WebViewJavascriptBridge
iOS下 JS 與 OC 互相調用(六) - WKWebView+WKWebViewJavascriptBridge
