利用KVO设置网页的一些属性

@WilliamAlex大叔的微博一起学习iOS

思路: 以前访问网页的控件功能相对来说有个缺点: 有的有返回,前进或者是监听进度的进度条,但是必须要借助其它应用才能打开,也有在当前应用就能打开网页的,但是,却没有上述的一些功能.以下介绍两种方法来介绍如何打开一个网页.

• 1, SFSafariViewController(只能在iOS9或者更高的版本使用)

SFSafariViewController展示网页:1.webView 2.openUrl
webView:没有自带功能,好处,就在当前应用下展示网页,webView不能监听进度条
safari:自带了很多功能,弊端:必须要跳转到其他应用
在当前应用下展示网页,但是有safari功能,自定义view,进度条,前进,后退,刷新功能,网址.
iOS9 SFSafariViewController:具备safari功能,并且可以在当前应用下展示网页
只能在iOS9使用

//  1.首先导入一个框架
 #import <SafariServices/SafariServices.h>

• 2, WebKit:跟WebView,能监听进度条,iOS8以后版本才能使用.

方法一 :

// 背景介绍: 创建一个流水布局,当点击流水布局中的cell时,就跳转到对应的网页.
步骤:
1, 定义了个模型类,声明url属性
2, 导入框架: #import <SafariServices/SafariServices.h>
3, 遵守代理,并设置代理
4, 实现代理方法

• 1,主要方法实现:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{

   // 取出模型
   WGSquareItem *item = self.topics[indexPath.row];

   // 判断模型中的url是否是"http"
   if ([item.url hasPrefix:@"http"]) {

       // 跳转界面
       SFSafariViewController *safarVc = [[SFSafariViewController alloc] initWithURL:[NSURL URLWithString:item.url]];

       safarVc.hidesBottomBarWhenPushed = YES;

       [self.navigationController pushViewController:safarVc animated:YES];
   }
}

• 注意 : 需要遵守协议以及设置代理.

方法二 :

• 思路 : 在iOS8的时候,一般都是使用UIWebView,但是需要自己设置一些功能.

  • 1, 新建一个继承自UIViewController的类,在storyboard中描述好界面,拖线监听属性

• 2, 在.h文件中定义一个NSUrl属性,用于接收传递进来的url值.

• 3, 在.m文件中声明一个WKWebView(需要用到进度条和title属性)

• 实现方法如下

// 声明属性和监听对应的控件的变化
#import "WGWebViewController.h"
#import <WebKit/WebKit.h>

@interface WGWebViewController () <UIWebViewDelegate>

/** 网页 */
@property (nonatomic, weak) WKWebView *webView;
/** 监听网页占位视图 */
@property (weak, nonatomic) IBOutlet UIView *htmlView;
/** 监听返回 */
@property (weak, nonatomic) IBOutlet UIBarButtonItem *backItem;
/** 监听前进 */
@property (weak, nonatomic) IBOutlet UIBarButtonItem *forwardItem;
/** 监听进度条 */
@property (weak, nonatomic) IBOutlet UIProgressView *progressView;
@end

• KVO监听属性值的变化

@implementation WGWebViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self loadWebView];
}

#pragma mark - 加载网页
- (void)loadWebView {

    // 加载网页
    WKWebView *webView = [[WKWebView alloc] init];
    [self.htmlView addSubview:webView];
    self.webView = webView;

    // 加载请求
    NSURLRequest *request = [NSURLRequest requestWithURL:_url];
    [_webView loadRequest:request];

    // 前进,后退,刷新,进度条,网页信息
    // Observer;观察者
    // KeyPath:观察哪个属性
    // options:观察新值
    // KVO:监听属性
    [_webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
    [_webView addObserver:self forKeyPath:@"goBack"            options:NSKeyValueObservingOptionNew context:nil];
    [_webView addObserver:self forKeyPath:@"title"             options:NSKeyValueObservingOptionNew context:nil];
    [_webView addObserver:self forKeyPath:@"goForward"         options:NSKeyValueObservingOptionNew context:nil];

}

• 注意 :在创建网页时时WKWebView,不是UIWebView,不然在后面是拿不到进度条的属性值的
• 移除KVO监听

#pragma mark - 移除KVO
- (void)dealloc
{
    [_webView removeObserver:self forKeyPath:@"title"];
    [_webView removeObserver:self forKeyPath:@"goBack"];
    [_webView removeObserver:self forKeyPath:@"goForward"];
    [_webView removeObserver:self forKeyPath:@"estimatedProgress"];

}

• 布局创建的webView

#pragma mark - 布局
- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    _webView.frame = _htmlView.bounds;
}

• 监听属性是否有新值的产生

#pragma mark - 监听是否有新值
/**
 *  只要是用KVO监听,只要有新值就会调用该方法
 */
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
    _backItem.enabled = _webView.canGoBack;
    _forwardItem.enabled = _webView.canGoForward;
    _progressView.progress = _webView.estimatedProgress;
    _progressView.hidden = _webView.estimatedProgress >= 1;
    self.title = _webView.title;
}

• 注意 : 1, 创建加载网页的View必须是WKWebView,不能是UIWebView(容易粗心大意),否则这里是拿不到estimatedProgress属性值的. 2, 这个方法表示的意思是当使用KVO监听属性时,只要属性有新值的产生,就一定会来到这个方法.
• 事件监听(拖线监听)

#pragma mark - 事件监听

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