WKWebView与js交互实战

demo动效GIF.gif

WKWebView介绍

WKWebView 是苹果在 iOS 8 中引入的新组件，目的是给出一个新的高性能的 Web View 解决方案，摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题。
WKWebView 的优点
- 1.将浏览器内核渲染进程提取出 App，由系统进行统一管理，这减少了相当一部分的性能损失。
- 2.js 可以直接使用已经事先注入 js runtime 的 js 接口给 Native 层传值，不必再通过苦逼的 iframe 制造页面刷新再解析自定义协议的奇怪方式。
- 3.支持高达 60 fps 的滚动刷新率，内置了手势探测
- 4.更优雅的与JS的交互方式

常用的新增加属性

1.estimatedProgress

有了它你不在需要苦逼的用UIwebView做假的进度条了

2.title

和UIwebView原来的标题一样，只不过不再是通过js去获取了

3.WKWebViewConfiguration

这个是配置js与wk的核心配置对象，后面会提及。

以上三个属性除了WKWebViewConfiguration它以外都是用KVO的形式去监听

    [self.wkWebView addObserver:self
                     forKeyPath:@"estimatedProgress"
                        options:NSKeyValueObservingOptionNew
                        context:nil];
    [self.wkWebView addObserver:self
                     forKeyPath:@"title"
                        options:NSKeyValueObservingOptionNew
                        context:nil];
    [self.wkWebView addObserver:self
                   forKeyPath:@"loading"
                      options:NSKeyValueObservingOptionNew
                      context:nil];

然后我们去KVO处理里面去做一些事

#pragma mark - 观察者监听
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        self.progresslayer.opacity = 1;
        self.progresslayer.frame = CGRectMake(0, 0, kScreenWidth*[change[@"new"] floatValue], estimatedProgressHeight);
        NSLog(@"%@",change[@"new"]);
        if ([change[@"new"] floatValue] == 1) {
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                self.progresslayer.opacity = 0;

                NSString *js = @"window.alert('欢迎体验WkWebView!');";
                [self.wkWebView evaluateJavaScript:js completionHandler:nil];

            });
        }
    }else if([keyPath isEqualToString:@"title"]){
        NSString *title = change[@"new"];
        self.titleLabel.text = title;
    }else if([keyPath isEqualToString:@"loading"]){
        //做一些加载的事
    }else{
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }

    if(!self.wkWebView.loading){
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.progresslayer.opacity = 0;
        });
    }
}

新的代理方法

1.WKUIDelegate
与JS原生的alert、confirm、prompt交互，将弹出来的实际上是我们原生的窗口,并且要强调的是在代理里拿到数据后，必须又原生传回给JS

#pragma mark - WKUIDelegate
// 在JS端调用alert函数时，会触发此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {

    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:message preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }]];
    [self presentViewController:alert animated:YES completion:NULL];
}

// 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{
}
/** webview关闭事件 */
- (void)webViewDidClose:(WKWebView *)webView;
{

}

2.WKNavigationDelegate
这里处理web导航操作

/** 在发送请求之前，决定是否跳转
 *  与UIWebView的- (BOOL)webView:(UIWebView *)webView
 shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType相当;
 */


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

    NSString *urlString = [[navigationAction.request URL] absoluteString];

    // urlString = [urlString stringByRemovingPercentEncoding];

    /**这这去做图片显示的操作
     *  网页没请求完不会进这个方法的
     *  这里还有一个小问题，就是测试了下百度的链接，有些图片是进下个层级的链接，它也截取到了这里需要改进下
     */
    if ([urlString hasPrefix:@"myweb:imageClick:"]) {
        NSString *imageUrl = [urlString substringFromIndex:@"myweb:imageClick:".length];
        NSLog(@"imageUrl%@",imageUrl);
        if ([_images containsObject:imageUrl]) {
            NSInteger imageIndex =   [_images indexOfObject:imageUrl];

            UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:[NSString stringWithFormat:@"你点了第%ld张照片",imageIndex] preferredStyle:UIAlertControllerStyleAlert];
            [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            }]];
            [self presentViewController:alert animated:YES completion:NULL];
        }
        decisionHandler(WKNavigationActionPolicyCancel);
    }else{
        decisionHandler(WKNavigationActionPolicyAllow);
    }

}
/// 网页加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

    [self getImageUrlByJS:webView Imageblock:^(NSArray *images) {
        NSLog(@"获得的图片总数：%@",images);
        _images = images;
    }];
    [self refreshbackBottomState];
}

/** 失败*/
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
{
    [self refreshbackBottomState];
}

/** 在收到响应后，决定是否跳转 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
{
    decisionHandler(WKNavigationResponsePolicyAllow);
}

/** 开始导航跳转时会回调*/
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation {
    NSLog(@"%s", __FUNCTION__);
}

/** 页面内容到达main frame时回调*/
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation {
    NSLog(@"%s", __FUNCTION__);
}

// 对于HTTPS的都会触发此代理，如果不要求验证，传默认就行
// 如果需要证书验证，与使用AFN进行HTTPS证书验证是一样的
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *__nullable credential))completionHandler {
    NSLog(@"%s", __FUNCTION__);
  completionHandler(NSURLSessionAuthChallengePerformDefaultHandling, nil);
}

// 9.0才能使用，web内容处理中断时会触发
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView {
    NSLog(@"%s", __FUNCTION__);
}

3.WKScriptMessageHandler
这就是js与OC交互的处理位置的地方

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
{
    if ([message.name isEqualToString:@"Xxx"]) {
        /**
         *打印所传过来的参数，只支持NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull类型
         */
        NSLog(@"%@", message.body);
    }
}

js与wk内容的交互

在创建WKWebView之前，需要先创建配置对象，用来做一些配置
简单总结就是几点：
WK不再需要像webView那样去截取Url了
- 配置 WKWebViewConfiguration
- 注入js对象
- 去WKScriptMessageHandler代理中接收，然后处理JS传递过来的事件和参数

/** 偏好设置也没有必须去修改它，都使用默认的就可以了，除非你真的需要修改
 *   WKUserContentController是用于给JS注入对象的，注入对象后，JS端就可以使用：
 *   window.webkit.messageHandlers..postMessage()来调用发送数据给iOS端
 *   比如：window.webkit.messageHandlers.Xxx.postMessage({body: '传数据'});
 */
- (WKWebViewConfiguration *)config
{
    if (_config == nil) {
        WKWebViewConfiguration *config =[[WKWebViewConfiguration alloc]init];
        // 设置偏好设置
        config.preferences = [[WKPreferences alloc] init];
        // 默认为0
        config.preferences.minimumFontSize = 10;
        // 默认认为YES
        config.preferences.javaScriptEnabled = YES;
        // 在iOS上默认为NO，表示不能自动通过窗口打开
        config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
        /**
         *  这个name注入JS对象名称Xxxx，当JS通过Xxx来调用时，
         *  JS对象可以注入多个，用于不同的功能
         *  我们可以在WKScriptMessageHandler代理中接收到
         */
        [config.userContentController addScriptMessageHandler:self name:@"Xxx"];
        _config = config;
    }
    return _config;
}

wk与js交互

主要就是通过

(void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler;来实现

WK.png

简单举例
                NSString *js = @"window.alert('欢迎体验WkWebView!');";
                [self.wkWebView evaluateJavaScript:js completionHandler:nil];
                对应的就会触发WK alert代理

WKWebView与js交互 实战