iOS-WKWebview 帶有進度條載入的ViewController【KVO監聽Webview載入進度】

前言

為什麼要說 WKWebview，在之前做電子書筆記時已經提過 WKWebview 在iOS8之後已完全替代 Webview，原因就不多說了，主要還是記憶體過大；

封裝

封裝一個基於 UIViewController 類： WKWebViewController

WKWebViewController.h

@interface WKWebViewController : UIViewController
///目標URL
@property (nonatomic,strong) NSString *url;
@property (nonatomic,strong) WKWebView *webview;
@end

WKWebViewController.m

#import "WKWebViewController.h"

@interface WKWebViewController ()<WKNavigationDelegate,UIScrollViewDelegate>
///進度條
@property (nonatomic, strong) UIProgressView *progressView;
@end

@implementation WKWebViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    ///添加 KVO 對進度監聽
    [self.webview addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
    [self.view addSubview:self.webview];
    [self.view addSubview:self.progressView];
    
}

#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.progressView.progress == 1) {
            __weak typeof (self)weakSelf = self;
            [UIView animateWithDuration:0.25f delay:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{
                weakSelf.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.4f);
            } completion:^(BOOL finished) {
                weakSelf.progressView.hidden = YES;
                
            }];
        }
    }else{
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

#pragma mark - webview 代理
//開始載入
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    NSLog(@"開始載入網頁");
    //開始載入網頁時展示出progressView
    self.progressView.hidden = NO;
    //開始載入網頁的時候將progressView的Height恢復為1.5倍
    self.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f);
    //防止progressView被網頁擋住
    [self.view bringSubviewToFront:self.progressView];
}
//載入完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    NSLog(@"載入完成");
    //載入完成隱藏progressView
    self.progressView.hidden = YES;
}
//載入失敗
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {
    NSLog(@"載入失敗");
    //載入失敗隱藏progressView
    self.progressView.hidden = YES;
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    return nil;
}
#pragma mark - 屬性
- (WKWebView *)webview{
    if (!_webview) {
        WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
        // 自適應屏幕寬度js
        NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
        WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
        
        // 添加自適應屏幕寬度js調用的方法
        [wkWebConfig.userContentController addUserScript:wkUserScript];
        _webview = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - (wkj_IsIphoneX ? 88 + 33 : 64)) configuration:wkWebConfig];
        _webview.navigationDelegate = self;
        _webview.scrollView.delegate = self;
        _webview.opaque = NO;
    }
    return _webview;
}
- (UIProgressView *)progressView{
    if (!_progressView) {
        _progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 2)];
        _progressView.trackTintColor = [ColorKLSystem colorWithAlphaComponent:0.5];
        _progressView.tintColor = ColorKLSystem;
        _progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f);
    }
    return _progressView;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end