16-展示网页的4种方法

第一种方法：通过Safari

优点：自带很多功能，如进度条、前进、后退、刷新等
缺点：打开网页必须跳出当前应用
代码：

// 点击广告界面调用
- (void)tap
{
    // 跳转到界面 => safari
    NSURL *url = [NSURL URLWithString:_item.ori_curl];
    UIApplication *app = [UIApplication sharedApplication];
    if ([app canOpenURL:url]) {
        [app openURL:url];
    }
}

第二种方法：通过UIWebView

优点：可以在当前应用打开网页
缺点：没有自带功能，有Safari，但需要自己实现，不能实现进度条

第三种方法：通过SFSafariViewController

优点：专门用来展示网页（需求:即想要在当前应用展示网页,又想要safari功能）
缺点：ios9才能使用
基本使用：
（1）导入框架<SafariServices/SafariServices.h>
（2）创建SafariViewController
（3）实现返回功能，要设置代理，遵循协议，实现代理方法(导航条已经)
备注：
（1）跳转的网页url地址类型不同，如：http、https、mod等，所以跳转前要做一下判断
（2）SFSafariViewController推荐使用Modal，可以不用代理
（3）实现跳转后，点击导航条的Done，实现返回功能，就要遵循代理，实现safariViewControllerDidFinish:方法
代码：

#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    XMGSquareItem *item = self.squareItems[indexPath.row];
    if (![item.url containsString:@"http"]) return;
    
    NSURL *url = [NSURL URLWithString:item.url];
    
    // SFSafariViewController使用Modal
    SFSafariViewController *safariVc = [[SFSafariViewController alloc] initWithURL:url];
    [self presentViewController:safariVc animated:YES completion:nil];
}

#pragma mark - SFSafariViewControllerDelegate
- (void)safariViewControllerDidFinish:(SFSafariViewController *)controller
{
    [self.navigationController popViewControllerAnimated:YES];
}

第四种方法：通过WKWebView

优点：它是UIWebView的升级，ios8新推出的，添加了新功能，如：进度条、缓存
基本使用：
（1）导入<WebKit/WebKit.h>框架
（2）展示网页，自定义UIViewController
（3）创建网页控制器，push到自定义的UIViewController
代码：

#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    XMGSquareItem *item = self.squareItems[indexPath.row];
    if (![item.url containsString:@"http"]) return;

    // 创建网页控制器
    XMGWebViewController *webVc = [[XMGWebViewController alloc] init];
    webVc.url = [NSURL URLWithString:item.url];
    [self.navigationController pushViewController:webVc animated:YES];
    
}

自定义UIViewController
（1）xib
（2）webView需要尺寸，与占位视图一样即可
（3）实现前进、后退功能，要利用KVO监听属性改变（KVO用后，一定要移除）。

1.png

#import <UIKit/UIKit.h>
@interface XMGWebViewController : UIViewController
@property (nonatomic, strong) NSURL *url;
@end

#import "XMGWebViewController.h"
#import <WebKit/WebKit.h>
@interface XMGWebViewController ()
@property (weak, nonatomic) IBOutlet UIView *contentView;
@property (weak, nonatomic) IBOutlet WKWebView *webView;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *backItem;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *forwardItem;
@property (weak, nonatomic) IBOutlet UIProgressView *progressView;
@end

@implementation XMGWebViewController

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

#pragma mark - 生命周期方法
- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    // webView需要尺寸，与占位视图一样即可
    _webView.frame = self.contentView.bounds;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // 添加webView
    WKWebView *webView = [[WKWebView alloc] init];
    _webView = webView;
    [self.contentView addSubview:webView];
    
    // 展示网页
    NSURLRequest *request = [NSURLRequest requestWithURL:_url];
    [webView loadRequest:request];
    
    // KVO监听属性改变
    /*
        Observer:观察者
        KeyPath:观察webView哪个属性
        options:NSKeyValueObservingOptionNew:观察新值改变
     
        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];
    
}

//// 只要观察对象属性有新值就会调用
//- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
//{
//    self.backItem.enabled = self.webView.canGoForward;
//    self.forwardItem.enabled = self.webView.canGoBack;
//    self.title = self.webView.title;
//    self.progressView.progress = self.webView.estimatedProgress;
//    self.progressView.hidden = self.webView.estimatedProgress >= 1;
//}

//#pragma mark - 对象被销毁
//- (void)dealloc
//{
//    [self.webView removeObserver:self forKeyPath:@"canGoBack"];
//    [self.webView removeObserver:self forKeyPath:@"title"];
//    [self.webView removeObserver:self forKeyPath:@"canGoForward"];
//    [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
//}

@end

问题：运行后，会报WebKit未参加编译

解决：需要手动添加这个框架