如何使用WKWebView

如何使用WKWebView

由于目前iOS7.0使用用户已经低于5%，大多数公司的项目的最低版本要求已经是8.0以上了，如果你还在使用UIWebView以及JavaScriptCore进行js交互的话，是时候试试WKWebView了。

• WKWebView的内存开销要比UIWebView小很多
• 拥有高达60FPS滚动刷新率及内置手势
• 支持了更多的HTML5特性
• html页面和WKWebView交互更方便
• Safari相同的JavaScript引擎
• 提供常用的属性，如加载网页进度的属性estimatedProgress

基本使用

1.引入头文件

#import <WebKit/WebKit.h>

2.初始化

// 初始化1 
- (instancetype)initWithFrame:(CGRect)frame; 
// 初始化2，WKWebViewConfiguration可以用来设置与js交互的相关配置 
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration

3.加载页面

WKWebView *webview = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config]; 

[webview loadRequest:[NSURLRequest requestWithURL:[NSUrl urlWIthString:@"https://www.baidu.com"]]];

4.代理

4.1.WKNavigationDelegate

//和UIWebView中类似 
//页面开始加载时调用 
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation; 
// 当内容开始到达时调用 
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation; 
// 页面加载完成之后调用 
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation; 
// 页面加载失败时调用 
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

//收到服务器重定向请求后调用 
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation; 
// 在收到响应开始加载后，决定是否跳转 
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler; 
// 在请求开始加载之前调用，决定是否跳转 
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

4.2 WKUIDelegate

- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures; 
// 在js中调用alert函数时，会调用该方法。 
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler 
// 在js中调用confirm函数时，会调用该方法
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler 
// 在js中调用prompt函数时，会调用该方法 
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler

4.3.WKScriptMessageHandler

//获取js传递的数据 
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

5.WkWebView与js交互

首先初始化WKWebView并配置js的handler

//1、该对象提供了通过js向web view发送消息的途径 
WKUserContentController *userContentController = [[WKUserContentController alloc] init]; 
//添加在js中操作的对象名称，通过该对象来向web view发送消息 
[userContentController addScriptMessageHandler:self name:@"FirstJsObect"]; 
//2、初始化config
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init]; config.userContentController = userContentController; 
//3、通过初试化方法，生成webview对象并完成配置 
WKWebView *webview = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];

前端调用

这里如果想统一iOS和安卓端的前端调用方式，可以规定好一个方法，例如前端如果这样写：FirstJsObject.sendMessage() iOS端可以通过提前注入js代码替换成webkit.messageHandlers.*

//controller是WKUserContentController的实例 
//some js function中可以把前端写的代码转化为我们需要的代码
[controller addUserScript:[[WKUserScript alloc] initWithSource:@"some js function" injectionTime:(WKUserScriptInjectionTimeAtDocumentStart) forMainFrameOnly:YES]];

前端书写或者通过我们转化后的代码大致为:

<script type="text/javascript"> 
function clickBtn(){ 
    var dict = {"name":"tom","age":"20"}; 
    window.webkit.messageHandlers.FirstJsObect.postMessage(dict); 
} </script>

遵循WKScriptMessageHandler协议，实现其唯一必须实现的方法，在该方法中就可获得js向webview传递的数据。

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { 
    //这里可以根据方法名区分多个message
    NSLog(@"方法名:%@",message.name); 
    NSLog(@"内容:%@",message.body); 
}

6.WKWebView常用属性

estimatedProgress：页面加载进度，使用KVO监听该值。

//添加监听 
[webview addObserver:self forKeyPath:@"estimatedProgress" options:(NSKeyValueObservingOptionNew) context:nil]; 
//监听 
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context { if ([keyPath isEqualToString:@"estimatedProgress"]) { 
    NSLog(@"%@",change); 
} 
//移除 
-(void)dealloc{ [self.webView removeObserver:self forKeyPath:@"estimatedProgress"]; }

7.进阶使用

1.解决部分白屏问题

- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView {

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:(self.URLString)]];
    [self.webView loadRequest:request];
}

2.实现网页中的第三方app跳转，例如京东商城等

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler {

    decisionHandler(WKNavigationActionPolicyAllow);

    if ([navigationAction.request.URL.absoluteString containsString:@"openapp"] || [navigationAction.request.URL.absoluteString containsString:@"startapp"]) {
        [[UIApplication sharedApplication] openURL:navigationAction.request.URL];
    }



}

3.解决一些非mainFrame的action不加载的问题（例如一些百度的广告不能跳转的问题）

- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {

    if (!navigationAction.targetFrame.isMainFrame) {
        [webView loadRequest:navigationAction.request];
    }
    return nil;
}