WKWebView 是 iOS 8 推出的(和 iPhone 6 一起出来的)，用来替代 UIWebView 的一个新的 WebView 组件。
相对于 UIWebView 来说，有下面几个优势：
- 更多的 HTML5 支持。
- 高达 60 fps 的刷新率和滚动手势支持。
- 与 Safari 相同的 JavaScript 引擎。
- 可以获取网页加载进度：estimateProgress
WKWebView 的基本使用。
首先要导入 #import <WebKit/WebKit.h>。
并创建 WKWebView
// 创建浏览器个人偏好设置
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
// 创建浏览器 OC 和 JS 交互的对象
WKUserContentController *contentController = [[WKUserContentController alloc] init];
// 设置浏览器的 JS 和 OC 交互的对象
configuration.userContentController = contentController;
// 设置浏览器的配置信息。
configuration.preferences = [[WKPreferences alloc] init];
configuration.preferences.minimumFontSize = 45; // 设置浏览器的最小字体。
configuration.preferences.javaScriptEnabled = YES;// 打开 JS 交互。
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
_webView = webView;
// 设置浏览器自身的一些配置信息。
webView.allowsBackForwardNavigationGestures = YES; // 是否允许右滑返回上一页面
webView.allowsLinkPreview = YES; // 是否允许链接预览(3d touch)
webView.UIDelegate = self;
webView.navigationDelegate = self;
[self.view addSubview:webView];
// 加载本地 HTML 文件
[webView loadHTMLString:[NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"demo.html" ofType:nil] encoding:NSUTF8StringEncoding error:nil] baseURL:nil];
由于 WKWebView 的执行初始化方法是：- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;
所以，我们就知道了，必须创建一个 WKWebViewConfiguration 的对象用来初始化 WKWebView.
WKWebViewConfiguration 中有两个属性比较重要。
// 个人偏好设置。可以设置是否开启 JavaScript 交互，以及 浏览器显示的最小字体等。
@property (nonatomic, strong) WKPreferences *preferences;
// WKWebView 中 JS 和 OC 交互的桥梁。
@property (nonatomic, strong) WKUserContentController *userContentController;
WKWebView & WKWebViewConfiguration & WKPreferences & WKUserContentController 之间的关系。
WKWebView 中，OC 调用 JS 的方法
HTML 文件中，有一个 JS 函数。
function jsFuncInHTML() {
alert("我是 JS 的方法，我被 OC 调用了!");
return {
name : "李四",
age : 22
};
}
在 WKWebView 中，OC 主动调用 JS 的方法很简单。
// 使用
[webView evaluateJavaScript:@"jsFuncInHTML()" completionHandler:^(id _Nullable dataFromJS, NSError * _Nullable error) {
if (error) {
NSLog(@"%@",error);
return ;
}
NSLog(@"dataFromJS : %@",dataFromJS);
}];
等价于 UIWebView 中的 [UIWebView new] stringByEvaluatingJavaScriptFromString:<#(nonnull NSString *)#>。
但 stringByEvaluatingJavaScriptFromString 的返回值仅仅只能接受字符串。
其中 completionHandler 是 JS 执行完成之后的回调，会将 JS 方法的返回值获取到。
当然，我们也可以使用 WKUserScript 把一个 JS 文件，使用上面的方式注入到 WKWebView 中。
// 也可以把一个 JS 文件注入到 WKWebView 中。
NSString *jsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"js.js" ofType:nil] encoding:NSUTF8StringEncoding error:nil];
WKUserScript *script2 = [[WKUserScript alloc] initWithSource:jsSource injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[webView.configuration.userContentController addUserScript:script2];
对于 JS 中普通的 JS 变量和函数。
var jsVar = "我是普通的 JS 变量";
var jsFunction = function() {
return "我是普通的 JS Function";
}
获取方式：
// 获取普通的 JS 变量
[webView evaluateJavaScript:@"jsVar" completionHandler:^(id _Nullable jsVar, NSError * _Nullable error) {
NSLog(@"%@",jsVar);
}];
// 获取普通的 JS 方法返回值
[webView evaluateJavaScript:@"jsFunction()" completionHandler:^(id _Nullable returnValue, NSError * _Nullable error) {
NSLog(@"%@",returnValue);
}];
WKWebView JS 调用 OC 的方法。
在使用 WKWebView 的时候，JS 调用 OC 的方法主要借助于 WKWebView 中的 WKWebViewConfiguration 的 userContentController 来进行。
主要步骤包括：
首先在 OC 中注册 JS 方法需要调用的 OC 方法。
[webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];
其中 参数 self 必须遵守 WKScriptMessageHandler 协议。
此协议中有一个必须实现的方法。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
这行代码的意思是：**在 JS 中调用 jsFunc 方法的时候，会间接的调用 self 身上的 `- (void)userContentController:(WKUserContentController )userContentController didReceiveScriptMessage:(WKScriptMessage )message; 方法。
其中 message 参数是 WKScriptMessage 的类型。
这里类型有2个比较重要的属性。
// JS 回传过来的数据
@property (nonatomic, readonly, copy) id body;
// js 方法的名字。
@property (nonatomic, readonly, copy) NSString *name;
基本步骤：
首先注册一个 JSFunc ，表示当前控制器会处理这个 JS 函数的调用。
[webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];
其次，让当前控制器遵守 WKScriptMessageHandler 协议，并实现协议方法。
// 收到 JS 的方法的时候调用。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"jsFunc"]) {
NSDictionary *dataFromJS = message.body;
NSLog(@"%@ %@",dataFromJS,message.name);
} else if ([message.name isEqualToString:@"jsFunc2"]) {
//...do something here.
}
}
最后，在 HTML 文件中，使用固定调用语法，调用 JS 函数，并传递参数到 OC。
window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});
这里的固定表示 : window.webkit.messageHandlers.<你在 OC 中注册的需要观察的 JSFuncName>.postMessage(<需要传递给 OC 的参数>)
除了尖括号的位置，其他地方写法都是定死了。
毕竟是 iOS 框架的浏览器，苹果想在 WKWebView 的 window 下面添加 webkit.messageHanlders.xxxxx. 还是很简单的事情。
运行结果：
2018-03-15 21:30:55.678 WKWebView 之一基本使用[4657:1075184] {
name = 李四,
age = 22,
} jsFunc
关于 WKWebView 中 JS 调用 OC 的方法，可以画一张图来理解。
最后总结：
- 使用 WKWebView 在不借助第三方框架的情况下，达到 JS 和 OC 交互，需要借助
WKWebView.WKWebViewConfiguration.UserContentController 这个对象。 - 使用 WKWebView.WKWebViewConfiguration.UserContentController 的
addScriptMessageHandler方法，简历 JSFunc 和 OCMethod 的映射关系。 - 让处理 JS 回调的 OC 方法对象(也即是当前控制器遵守
WKScriptMessageHandler。 - 实现协议的 ：
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message方法。 - WKWebView.configuration.userContentController 是把所有的 JS 回调 OC 都聚合在了
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message一个方法之中。 - 在这个代理方法中，WKScriptMessage 有两个属性比较重要， name 可以判断是那个 JSFunc 的调用，body 则是 JS Func 传递过来的数据。
UIWebView & JSContext 的方式是，OC 和 JS 共享一个 JS 执行上下文。两端的互相调用都比较符合直觉，也比较好用。
WKWebView 则是依赖 userContentController。
首先，要注册需要观察的 JSFunction 函数 [webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];。
然后，在 JS 中调用 window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});。
最后，所有被注册的 JSFunction 调用最终都会导入到 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 这个方法之中。
