上一篇講了借助 JavaScriptCore 進行 OC 與 JS 的交互，鏈接請戳??
OC 與 JS 交互之 JavaScriptCore
今天總結(jié)一下通過 WKWebView 來進行 OC 與 JS 交互~
WKWebView
WKWebView 是蘋果爸爸在 iOS8 推出的希望替代 UIWebView 的WebView，推出了很多新的功能，新的屬性，并且通過 WKScriptMessageHandler、WKNavigationDelegate、WKUIDelegate 這三個協(xié)議，讓請求、執(zhí)行 web 頁面的過程變得更加可控。
與之交互用到的三大代理：
WKNavigationDelegate：與頁面導航加載相關(guān)
WKUIDelegate：與 JS 交互時的 UI 展示相關(guān)，比較 JS 的alert、confirm、prompt
WKScriptMessageHandler：與 JS 交互相關(guān)，通常是 iOS 端注入名稱，JS 端通過 window.webkit.messageHandlers.{NAME}.postMessage()來發(fā)消息到 iOS 端
關(guān)于 WKWebView 的更多細節(jié)有時間再總結(jié)下，今天先說說有關(guān) OC 與 JS 交互的過程。
OC 調(diào)用 JS
WKWebViewConfiguration *configuration = [WKWebViewConfiguration new];
configuration.userContentController = [WKUserContentController new];
NSString *sourceStr = @"alert('在載入webview時通過oc注入的js方法');";
WKUserScript *script = [[WKUserScript alloc] initWithSource:sourceStr injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
[configuration.userContentController addUserScript:script];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
_webView.UIDelegate = self;
生成的 configuration ，包含了之后新建 webView 的一系列屬性；再生成一個腳本片段，包含 JS 的 alert 語句，將其加給 configuration 的 userContentController，在開始加載 web 頁面時，注入 JS 方法，執(zhí)行這個 JS 語句。
或者用 webView 的 evaluateJavaScript 直接調(diào)用 JS，與 JavaScriptCore 中的 evaluateScript 類似：
NSString *script = @"alert('webview 直接調(diào)用 JS 方法');";
[self.webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"result: %@, error: %@", result, error);
}];
由于蘋果爸爸要求用 native 的方式處理 web 中的彈框，這里就需要
controller 實現(xiàn) UIDelegate 中的方法，拿到 JS 中的參數(shù)，生成彈框，提醒用戶：
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Tip" message:message preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:[UIAlertAction actionWithTitle:@"Ok" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alertController animated:YES completion:nil];
}
效果如圖：
UIDelegate 有不同的協(xié)議方法分別對應(yīng) native 確定、選擇、輸入文本框的等彈框，效果還不錯~
JS 調(diào)用 OC
先新建一個 html 文件如下：
<!DOCTYPE html>
<html>
<head>
<title>test javascript</title>
<style type="text/css">
* {font-size: 40px;}
</style>
</head>
<body>
<div style="margin-top: 100px">
<input type="button" value="js call oc" onclick="jsCallOC()">
</div>
<script type="text/javascript">
function jsCallOC(){
var message = {
'method' : 'jsCallOC',
'param1' : 'zn',
};
window.webkit.messageHandlers.AppModel.
postMessage({body: message});
}
</script>
</body>
</html>
點擊按鈕，調(diào)用 JS 方法，在 JS 中
window.webkit.messageHandlers.{NAME}.postMessage() 將 JS 中的對象轉(zhuǎn)換為 OC 中的處理消息對象，并且將 message 傳遞給他。
//將 self 作為 AppModel ，處理 JS 傳遞過來的數(shù)據(jù)
[configuration.userContentController addScriptMessageHandler:self name:@"AppModel"];
拿到 message 后，self 需要繼承 WKWebView 的另一個協(xié)議 WKScriptMessageHandler 的方法，解析消息，從而實現(xiàn) JS 到 OC 的調(diào)用：
// MARK: - WKScriptMessageHandler
// 注入 JS 名稱，在 JS 端通過 window.webkit.messageHandlers.AppModel.postMessage() 方法來發(fā)送消息到 native
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"messageBody: %@", message.body);
NSLog(@"messageName: %@", message.name);
}
參考博客：
WKWebView
WKWebView特性及使用
