iOS 学习 --- OC与JS交互（给WKWebView添加顶部加载进度条）

1. 在webview顶部添加一个进度条UIProgressView。
2. 给webVIew添加一个监听属性“estimatedProgress”。
3. 在监听事件中，设置ProgressView 的进度等于webview的estimatedProgress。

添加WKWebView，并给WKWebView添加监听事件 

- (void)addWKWebView{
    // 创建WKWebView
    if (@available(iOS 8.0, *)) {
        self.wkWebView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    } else {
        // Fallback on earlier versions
    }
    _wkWebView.backgroundColor = [UIColor whiteColor];
    _wkWebView.navigationDelegate = self;
    
    // 设置访问的URL
    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
    // 根据URL创建请求
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    // WKWebView加载请求
    [_wkWebView loadRequest:request];
    // 将WKWebView添加到视图
    [self.view addSubview:_wkWebView];
    //给WKWebView添加监听
    [_wkWebView addObserver:self forKeyPath:NSStringFromSelector(@selector(estimatedProgress)) options:0 context:nil];
}

给WKWebView添加ProgressView 

- (void)addProgressView{
    self.progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
    _progressView.frame = CGRectMake(0, 44, SCREEN_WIDTH, 5);
    
    [_progressView setTrackTintColor:[UIColor colorWithRed:240.0/255 green:240.0/255 blue:240.0/255 alpha:1.0]];
    _progressView.progressTintColor = [UIColor greenColor];
    [self.view addSubview:_progressView];
    
}

 WKNavigationDelegate 代理方法

#pragma mark - WKNavigationDelegate
/**
 开始加载
 
 @param webView webView description
 @param navigation navigation description
 */
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation API_AVAILABLE(ios(8.0)){
    NSLog(@"页面开始加载时调用");
    //开始加载的时候，让进度条显示
    self.progressView.hidden = NO;
}

-(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation API_AVAILABLE(ios(8.0)){
    NSLog(@"didCommitNavigation");
}

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation API_AVAILABLE(ios(8.0)){
    NSLog(@"didFinishNavigation");
}

监听方法实现 

#pragma mark - KVO
//kvo 监听进度

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    
    if ([keyPath isEqualToString:NSStringFromSelector(@selector(estimatedProgress))]
        && object == self.wkWebView) {
        [self.progressView setAlpha:1.0f];
        BOOL animated = self.wkWebView.estimatedProgress > self.progressView.progress;
        [self.progressView setProgress:self.wkWebView.estimatedProgress
                              animated:animated];
        
        if (self.wkWebView.estimatedProgress >= 1.0f) {
            
            [UIView animateWithDuration:0.3f delay:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{
                [self.progressView setAlpha:0.0f];
            } completion:^(BOOL finished) {
                [self.progressView setProgress:0.0f animated:NO];
            }];
        }
    }else{
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

移除监听事件 

-(void)dealloc {
    [self.wkWebView removeObserver:self forKeyPath:NSStringFromSelector(@selector(estimatedProgress))];
    self.wkWebView.navigationDelegate = nil;
}