1. 程式人生 > >iOS WKWebView 獲得title和載入進度

iOS WKWebView 獲得title和載入進度

1、前言

iOS8後,蘋果推出了新框架Webkit,提供了替換UIWebView的元件WKWebView,相比於UIWebView,好處多多,速度更快了,佔用記憶體少了。

2、基本使用

使用方法和UIWebView大同小異,具體使用可以參考使用WKWebView替換UIWebView,這篇文章講的挺詳細了,這不是我們本篇的重點,我們的重點是講下怎麼頁面title和載入進度值。

注意:使用時記得匯入WebKit.framework框架

3、獲得頁面title和載入進度值(基於系統KVO)

//匯入框架
#import <WebKit/WebKit.h>
/*********/
@property (nonatomic, strong) WKWebView *mWebView;//webView @property (nonatomic, strong) UIProgressView *mProgressView;//進度條 /*********/ - (void)viewDidLoad { [super viewDidLoad]; [self initWebView]; } //增加kvo監聽,獲得頁面title和載入進度值 - (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [self
.mWebView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:NULL]; [self.mWebView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:NULL]; } //KVO 一定要移除,要不然會崩潰 - (void)dealloc{ [self.mWebView removeObserver:self forKeyPath:@"estimatedProgress"
]; [self.mWebView removeObserver:self forKeyPath:@"title"]; } - (void)initWebView { _mWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight - TopFullHeight)]; [_mWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http:xxxxx"]]]; [self.view addSubview:_mWebView]; //進度條新增到navigationBar CGFloat progressBarHeight = 2.0f; CGRect navigationBarBounds = self.navigationController.navigationBar.bounds; CGRect barFrame = CGRectMake(0, navigationBarBounds.size.height - progressBarHeight, navigationBarBounds.size.width, progressBarHeight); _mProgressView = [[UIProgressView alloc] initWithFrame:barFrame]; _mProgressView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin; _mProgressView.progressTintColor = [UIColor greenColor]; [self.navigationController.navigationBar addSubview:_mProgressView]; } #pragma mark KVO的監聽代理 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { //載入進度值 if ([keyPath isEqualToString:@"estimatedProgress"]){ if (object == self.mWebView){ self.mProgressView.alpha = 1; [self.mProgressView setProgress:self.mWebView.estimatedProgress animated:YES]; if(self.mWebView.estimatedProgress >= 1.0f) { [UIView animateWithDuration:0.5 animations:^{ self.mProgressView.alpha = 0; } completion:^(BOOL finished) { [self.mProgressView setProgress:0.0f animated:NO]; }]; } }else{ [super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; } }else if ([keyPath isEqualToString:@"title"]){//網頁title if (object == self.mWebView){ self.navigationItem.title = self.mWebView.title; }else{ [super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; } }else{ [super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; } }

至此,載入標題和進度值完成,try。

KVOController是facebook開源的一個KVO框架,使用方便,好處多多,我就是因為側滑返回偶爾導致系統KVO沒有釋放,最後程式崩潰了,所以這裡建議使用這個框架,使用程式碼入下

#import "FBKVOController.h"
@property (nonatomic, strong) FBKVOController *kvoController;

- (void)initFBKVO{

    //KVO
    __weak typeof (self) weakSelf = self;
    self.kvoController = [FBKVOController controllerWithObserver:self];
    [self.kvoController observe:self.mWebView keyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew block:^(id  _Nullable observer, id  _Nonnull object, NSDictionary<NSString *,id> * _Nonnull change) {

        weakSelf.mProgressView.alpha = 1;
        [weakSelf.mProgressView setProgress:self.mWebView.estimatedProgress animated:YES];
        if(weakSelf.mWebView.estimatedProgress >= 1.0f)
        {
            [UIView animateWithDuration:0.5 animations:^{
                weakSelf.mProgressView.alpha = 0;
            } completion:^(BOOL finished) {
                [weakSelf.mProgressView setProgress:0.0f animated:NO];
            }];
        }  
    }];

    [self.kvoController observe:self.mWebView keyPath:@"title" options:NSKeyValueObservingOptionNew block:^(id  _Nullable observer, id  _Nonnull object, NSDictionary<NSString *,id> * _Nonnull change) {
         weakSelf.navigationItem.title = self.mWebView.title;
    }];
}

參考