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

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