OC 与 JS 交互之 WKWebView

看到一篇文章非常好，就直接学习了，搞到自己中，用于自己平常项目中，封装留存。如果不同的建议，可以提出，共同探讨与学习!如有侵权，告知，删除。

WKWebView

WKWebView 是苹果爸爸在 iOS8 推出的希望替代 UIWebView 的WebView，推出了很多新的功能，新的属性，并且通过 WKScriptMessageHandler、WKNavigationDelegate、WKUIDelegate 这三个协议，让请求、执行 web 页面的过程变得更加可控。

与之交互用到的三大代理：

WKNavigationDelegate：与页面导航加载相关

WKUIDelegate：与 JS 交互时的 UI 展示相关，比较 JS 的alert、confirm、prompt

WKScriptMessageHandler：与 JS 交互相关，通常是 iOS 端注入名称，JS 端通过 window.webkit.messageHandlers.{NAME}.postMessage()来发消息到 iOS 端

关于 WKWebView 的更多细节有时间再总结下，今天先说说有关 OC 与 JS 交互的过程。

OC 调用 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 方法，执行这个 JS 语句。

或者用 webView 的 evaluateJavaScript 直接调用 JS，与 JavaScriptCore 中的 evaluateScript 类似：

NSString *script = @"alert('webview 直接调用 JS 方法');";    
[self.webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    NSLog(@"result: %@, error: %@", result, error);
}];

由于苹果爸爸要求用 native 的方式处理 web 中的弹框，这里就需要

controller 实现 UIDelegate 中的方法，拿到 JS 中的参数，生成弹框，提醒用户：

- (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];
}

效果如图：

[图片上传失败...(image-b4f192-1513742096926)]

UIDelegate 有不同的协议方法分别对应 native 确定、选择、输入文本框的等弹框，效果还不错~

JS 调用 OC

先新建一个 html 文件如下：

点击按钮，调用 JS 方法，在 JS 中

window.webkit.messageHandlers.{NAME}.postMessage() 将 JS 中的对象转换为 OC 中的处理消息对象，并且将 message 传递给他。

//将 self 作为 AppModel ，处理 JS 传递过来的数据
[configuration.userContentController addScriptMessageHandler:self name:@"AppModel"];

拿到 message 后，self 需要继承 WKWebView 的另一个协议 WKScriptMessageHandler 的方法，解析消息，从而实现 JS 到 OC 的调用：

// MARK: - WKScriptMessageHandler
// 注入 JS 名称，在 JS 端通过 window.webkit.messageHandlers.AppModel.postMessage() 方法来发送消息到 native
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    NSLog(@"messageBody:  %@", message.body);
    NSLog(@"messageName: %@", message.name);
}