WKWebView
1 在性能、稳定性、功能方面有很大提升
2 和 Safari 相同的 JavaScript 引擎，允许JavaScript的Nitro库加载并使用（UIWebView中限制）；
WKWebView使用
// 创建webview
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
// 创建请求
NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
// 加载网页
[webView loadRequest:request];
// 将webView添加到界面
[self.view addSubview:webView];
WKWebView操作JS
WKWebView加载JS
//JS文件路径
NSString *jsPath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"js"];
//读取JS文件内容
NSString *jsContent = [NSString stringWithContentsOfFile:jsPath encoding:NSUTF8StringEncoding error:nil];
//创建用户脚本对象，
//WKUserScriptInjectionTimeAtDocumentStart :HTML文档创建后，完成加载前注入，类似于<head>中
//WKUserScriptInjectionTimeAtDocumentEnd :HTML文件完成加载后注入,类似于<body>中
WKUserScript *script = [[WKUserScript alloc] initWithSource:jsContent injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
//添加用户脚本
[webView.configuration.userContentController addUserScript:script];
WKWebView执行JS方法
//执行JS方法
[webView evaluateJavaScript:@"test()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
//result为执行js方法的返回值
if(error){
NSLog(@"Success");
}else{
NSLog(@"Fail");
}
}];
WKWebView代理方法
WKNavigationDelegate 协议 导航监听
WKNavigationDelegate
#pragma mark - WKNavigationDelegate
// 页面开始加载时调用
#UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
NSLog(@"%s",__FUNCTION__);
}
// 内容开始返回时调用(view的过渡动画可在此方法中加载)
#UIWebViewDelegate: - webViewDidStartLoad:
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
NSLog(@"%s",__FUNCTION__);
}
// 页面加载完成时调用(view的过渡动画的移除可在此方法中进行)
#UIWebViewDelegate: - webViewDidFinishLoad:
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
NSLog(@"%s",__FUNCTION__);
}
// 页面加载失败时调用
#UIWebViewDelegate: - webView:didFailLoadWithError:
#WKNavigationDelegate: - webView:didFailNavigation:withError:
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation{
NSLog(@"%s",__FUNCTION__);
}
三个页面跳转的代理方法：
#pragma mark WKNavigation 当web视图需要响应身份验证跳转时调用
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * credential))completionHandler{
}
#pragma mark 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation {
}
#pragma mark 在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
}
#pragma mark 在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
//需执行decisionHandler的block。
}
Native调用JavaScript方法
原生调用JavaScript的代码需要在页面加载完成之后，就是在 - webView:didFinishNavigation:代理方法里面
OC代码：
[webView evaluateJavaScript:@"showAlert('奏是一个弹框')" completionHandler:^(id item, NSError * _Nullable error) {
// Block中处理是否通过了或者执行JS错误的代码
}];
JavaScript调用Native方法
JavaScript的配置
window.webkit.messageHandlers.NativeMethod.postMessage("就是一个消息啊");
这个NativeMethod是和App中要统一的，配置方法将在下面的Native中书写。
Native App的代码配置
创建WKWebView除了有- initWithFrame:方法外，还有一个高端的方法：- initWithFrame:configuration:方法
// 创建配置
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
// 创建UserContentController（提供JavaScript向webView发送消息的方法）
WKUserContentController* userContent = [[WKUserContentController alloc] init];
// 添加消息处理，注意：self指代的对象需要遵守WKScriptMessageHandler协议，结束时需要移除
[userContent addScriptMessageHandler:self name:@"NativeMethod"];
// 将UserConttentController设置到配置文件
config.userContentController = userContent;
// 高端的自定义配置创建WKWebView
WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds configuration:config];
// 设置访问的URL
NSURL *url = [NSURL URLWithString:@"http://www.jianshu.com"];
// 根据URL创建请求
NSURLRequest *request = [NSURLRequest requestWithURL:url];
// WKWebView加载请求
[webView loadRequest:request];
// 将WKWebView添加到视图
[self.view addSubview:webView];
可以看到，添加消息处理的handler的name，就是JavaScript中调用时候的NativeMethod，这两个要保持一致。请把URL换成你自己的。
请注意第6行的代码配置当前ViewController为MessageHandler，需要服从WKScriptMessageHandler协议，如果出现警告⚠️，请检查是否服从了这个协议。
注意！注意！注意：上面将当前ViewController设置为MessageHandler之后需要在当前ViewController销毁前将其移除，否则会造成内存泄漏。
移除的代码如下：
[webView.configuration.userContentController removeScriptMessageHandlerForName:@"NativeMethod"];
WKUIDelegate 协议 网页监听
WKUIDelegate
#pragma mark - WKUIDelegate
/// 创建一个新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {
return nil;
}
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler {
}
/// 输入框
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
}
/// 确认框
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {
}
/// 警告框
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
}
加载顺序
百度测试
WKWebView增加的属性
1 WKWebViewConfiguration *configuration：初始化WKWebView的时候的配置，后面会用到
2 WKBackForwardList *backForwardList：相当于访问历史的一个列表
3 double estimatedProgress：进度，有这个之后就不用自己写假的进度条了
解决WKWebView加载POST请求无法发送参数问题
使用JavaScript解决WKWebView无法发送POST参数问题
1 将一个包含JavaScript的POST请求的HTML代码放到工程目录中
2 加载这个包含JavaScript的POST请求的代码到WKWebView
3 加载完成之后，用Native调用JavaScript的POST方法并传入参数来完成请求
- 创建包含JavaScript的POST请求的HTML代码
<html>
<head>
<script>
//调用格式： post('URL', {"key": "value"});
function post(path, params) {
var method = "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
</script>
</head>
<body>
</body>
</html>
- 将对应的JavaScript代码通过加载本地网页的形式加载到WKWebView
// JS发送POST的Flag，为真的时候会调用JS的POST方法（仅当第一次的时候加载本地JS）
self.needLoadJSPOST = YES;
// 创建WKWebView
self.webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
//设置代理
self.webView.navigationDelegate = self;
// 获取JS所在的路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"JSPOST" ofType:@"html"];
// 获得html内容
NSString *html = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
// 加载js
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];
// 将WKWebView添加到当前View
[self.view addSubview:self.webView];
- Native调用JavaScript脚本并传入参数来完成POST请求
Native调用JavaScript
// 加载完成的代理方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
// 判断是否需要加载（仅在第一次加载）
if (self.needLoadJSPOST) {
// 调用使用JS发送POST请求的方法
[self postRequestWithJS];
// 将Flag置为NO（后面就不需要加载了）
self.needLoadJSPOST = NO;
}
}
// 调用JS发送POST请求
- (void)postRequestWithJS {
// 发送POST的参数
NSString *postData = @"\"username\":\"aaa\",\"password\":\"123\"";
// 请求的页面地址
NSString *urlStr = @"http://www.postexample.com";
// 拼装成调用JavaScript的字符串
NSString *jscript = [NSString stringWithFormat:@"post('%@', {%@});", urlStr, postData];
// NSLog(@"Javascript: %@", jscript);
// 调用JS代码
[self.webView evaluateJavaScript:jscript completionHandler:^(id object, NSError * _Nullable error) {
}];
}
