##iOS 8新增 WKWebView

WKWebView：iOS 8新增，是UIWebView的升级，可以监听进度、缓存

一、布局
我们新建一个继承自UIViewController的控制器名叫WebViewController，新建时同时勾选xib。

然后我们开始布局

图解：ContentView是一个普通的UIView，撑满整个控制器View，之后我们创建的WKWebView视图就添加到这个控件里；Toolbar界面底部用来展示”前进/后退/刷新”网页功能的；ProgressView用来显示网页加载的进度条。布局时注意层次机构，它们是兄弟关系。

二、自定义控制器WebViewController的代码

先贴出全部代码：

//
//  WebViewController.h


#import 

@interface WebViewController : UIViewController

@property(nonatomic,strong)NSURL *url;

@end

url外部控制器调用本控制器时传递该属性。

//
//  WebViewController.m

#import "WebViewController.h"
#import 

@interface WebViewController ()
@property (weak, nonatomic) IBOutlet UIView *contentView;

@property(nonatomic,weak)WKWebView *webView;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *backItem;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *forwardItem;
@property (weak, nonatomic) IBOutlet UIProgressView *progressView;

@end

@implementation WebViewController

#pragma mark - UIToolbar

/**
 后退
 */
- (IBAction)goBack:(UIBarButtonItem *)sender
{
    [self.webView goBack];
}

/**
 前进
 */
- (IBAction)goForward:(UIBarButtonItem *)sender
{
     [self.webView goForward];
}

/**
 刷新
 */
- (IBAction)refresh:(UIBarButtonItem *)sender
{
     [self.webView reload];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    // 添加webView
    WKWebView *webView = [[WKWebView alloc] init];
    _webView = webView;
    [self.contentView addSubview:webView];

    // 展示网页
    NSURLRequest *request = [NSURLRequest requestWithURL:_url];
    [webView loadRequest:request];


    // KVO监听属性改变
    // 控制器 后退 前进 按钮状态
    [webView addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:nil];
    [webView addObserver:self forKeyPath:@"canGoForward" options:NSKeyValueObservingOptionNew context:nil];
    [webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil];

    // 监听进度条
    [webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
}



/**
 KVO监听的属性有了新值就会调用
 */
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionaryid> *)change context:(void *)context
{
    // 设置 后退按钮 前进按钮 的可用状态
    self.backItem.enabled = self.webView.canGoBack;
    self.forwardItem.enabled = self.webView.canGoForward;
    self.title = self.webView.title;

    // 给进度条赋值
    self.progressView.progress = self.webView.estimatedProgress;
    // 进度条100%后就隐藏
    self.progressView.hidden = self.webView.estimatedProgress >= 1;
}


/**
 调整子控件布局
 */
- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    // 设置webView的frame
    _webView.frame = self.contentView.bounds;
}


- (void)dealloc
{
    // 当控制器销毁 移除KVO的监听
    [self.webView removeObserver:self forKeyPath:@"canGoBack"];
    [self.webView removeObserver:self forKeyPath:@"canGoForward"];
    [self.webView removeObserver:self forKeyPath:@"title"];
    [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
}

@end

分析代码：

必须#import

    // 添加webView
    WKWebView *webView = [[WKWebView alloc] init];
    _webView = webView;
    [self.contentView addSubview:webView];

    // 展示网页
    NSURLRequest *request = [NSURLRequest requestWithURL:_url];
    [webView loadRequest:request];

完成这一步，我们的网页就能展示出来了。
实际开发中，从其他控制器跳转过来：

    // 跳转到展示网页的控制器
    WebViewController *webVc = [[WebViewController alloc] init];
    webVc.url = [NSURL URLWithString:item.url];
    [self.navigationController pushViewController:webVc animated:YES];

Toolbar上网页”后退/前进/刷新”功能实现：

/**
 后退
 */
- (IBAction)goBack:(UIBarButtonItem *)sender
{
    [self.webView goBack];
}

/**
 前进
 */
- (IBAction)goForward:(UIBarButtonItem *)sender
{
     [self.webView goForward];
}

/**
 刷新
 */
- (IBAction)refresh:(UIBarButtonItem *)sender
{
     [self.webView reload];
}

self.webView就是WKWebView，自带goBack/goForward/reload方法来实现”后退/前进/刷新”功能。
需要注意的是后退/前进2个UIBarButtonItem默认enabled为NO(一开始不能点击)。

什么时候网页可以前进/后退？需要利用KVO监听，所以在创建完webView的时候就需要添加监听：

    [webView addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:nil];
    [webView addObserver:self forKeyPath:@"canGoForward" options:NSKeyValueObservingOptionNew context:nil];

关于KVO添加属性监听，一定要在控制器销毁的时候移除监听：

- (void)dealloc
{
    // 当控制器销毁 移除KVO的监听
    [self.webView removeObserver:self forKeyPath:@"canGoBack"];
    [self.webView removeObserver:self forKeyPath:@"canGoForward"];
    [self.webView removeObserver:self forKeyPath:@"title"];
    [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
}

KOV监听到属性改变会调用一个方法，在这个方法里，我们就可以控制Toolbar上按钮的可用状态，同时拿到webView的其他属性只，来进行赋值操作：

/**
 KVO监听的属性有了新值就会调用
 */
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionaryid> *)change context:(void *)context
{
    // 设置 后退按钮 前进按钮 的可用状态
    self.backItem.enabled = self.webView.canGoBack;
    self.forwardItem.enabled = self.webView.canGoForward;
    self.title = self.webView.title;

    // 给进度条赋值
    self.progressView.progress = self.webView.estimatedProgress;
    // 进度条100%后就隐藏
    self.progressView.hidden = self.webView.estimatedProgress >= 1;
}

比如拿到网页加载进度值，然后复制给progressView控件，展示到界面上。