iOS 中 WebView 加进度条

缘由：今天在微信群里发现有朋友在聊到这个话题，一般得到的答案是 NJKWebViewProgress，这个确实不错，往往我们直接用它就OK啦。但是我记得 iOS 8.0 之后，WKWebView 中已经增加了一个estimatedProgress 的属性。

estimatedProgress 属性

就是利用KVO，观察一下其加载情况, 自己加一个进度条配合estimatedProgress就好啦

 [self.webView addObserver:self
               forKeyPath:@"estimatedProgress"
                  options:NSKeyValueObservingOptionNew
                  context:nil];

[self.webView removeObserver:self forKeyPath:@"estimatedProgress" context:nil];

- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary<NSString *,id> *)change
                       context:(void *)context {
    if ([keyPath isEqualToString:@"estimatedProgress"]) {}
   
}

progress.gif

一个简单的完整测试代码，还是OK的

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) WKWebView *webView;
@property (nonatomic, strong) UIProgressView *progressView;

@end

@implementation ViewController

#pragma mark Life Cycle
- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.webView];
    [self.view addSubview:self.progressView];
    
    [self.webView addObserver:self
               forKeyPath:@"estimatedProgress"
                  options:NSKeyValueObservingOptionNew
                  context:nil];
}

- (void)dealloc {
     [self.webView removeObserver:self forKeyPath:@"estimatedProgress" context:nil];
}


#pragma mark KVO
- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary<NSString *,id> *)change
                       context:(void *)context
{
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        
        self.progressView.progress = self.webView.estimatedProgress;
        // 加载完成
        if (self.webView.estimatedProgress  >= 1.0f ) {
            
            [UIView animateWithDuration:0.5f animations:^{
                self.progressView.alpha = 0.0f;
                self.progressView.progress = 0.0f;
            }];
            
        }else{
            self.progressView.alpha = 1.0f;
        }

    }
   
}

#pragma mark Action
- (IBAction)loadingAction:(id)sender {
    
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
}

- (IBAction)refreshAction:(id)sender {
    
    [self.webView reload];
}

#pragma mark LazyLoad
- (WKWebView *)webView {
    if (!_webView) {
        _webView = [[WKWebView alloc] init];
        _webView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
        _webView.backgroundColor = [UIColor whiteColor];
        _webView.scrollView.showsVerticalScrollIndicator = NO;
        _webView.scrollView.showsHorizontalScrollIndicator = NO;
        _webView.frame = CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 64);
    }
    return _webView;
}

- (UIProgressView *)progressView {
    if (!_progressView) {
        _progressView = [[UIProgressView alloc] init];
        _progressView.frame = CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, 2);
    }
    return _progressView;
}

@end

当然这是在iOS 8.0之后，我们利用 WKWebView的属性做的，iOS 8.0 之前还是用 NJKWebViewProgress 吧。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

如果还是不满意，那就自定义，对UIWebViewDelegate 中的这几个方法进行自己的处理，来显示我们需要的效果。