一起学习WKWebView使用（2）
之前把基本的学会了，这次该研究研究其他的功能，想想别的app上都有哪些功能，试着实现以下：
1.看文档找找 这个属性的意思是估算加载的进度类型是double，只读的看来可以用它来实现网页加载的进度展示
estimatedProgress //An estimate of what fraction of the current navigation has been loaded.
想一想，加载网页一般上面有一条蓝线来显示进度，就实现这个吧
//先弄个属性
@property (strong, nonatomic) UIProgressView *progressView;
//添加到视图上
[self.view addSubview:self.progressView];
懒加载一下吧,让它在状态栏下面显示,样式就默认吧
-(UIProgressView *)progressView{
if (_progressView==nil) {
_progressView= [[UIProgressView alloc]initWithProgressViewStyle:UIProgressViewStyleDefault];
_progressView.frame=CGRectMake(0, 20, self.view.bounds.size.width, 2);
}
return _progressView;
}
接下来就是监听这个属性值得变化，然后赋值给UIProgressView的属性上让他展示出来进度，思路就是这样，我那个偷懒就用ReactiveCocoa(这个框架真的很厉害) 框架了，上代码
//这里是就实现了监听绑定信号
RACSignal *sign=RACObserve(self.webView, estimatedProgress);
//这里就可以拿来用每次值改变都会调这个block里的代码
@weakify(self);
[sign subscribeNext:^(id x) {
@strongify(self);
//当进度为一完全加载完就让进度条隐藏吧
if ([x floatValue]==1) {
self.progressView.hidden=YES;
}
//复值
self.progressView.progress=[x floatValue];
}];
记得在每次新请求的时候把progressView显示出来，加上一句
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
NSLog(@"%s",__FUNCTION__);
self.progressView.hidden=NO;
self.hud=[MBProgressHUD showHUDAddedTo:self.view animated:YES];
}
算上上一篇的基本效果 进度条实现了 来看一下效果
进度git.gif
2.点着点着页面发现问题了，凡是另开一个网页的点击都不好用了，在当前页面刷新的可以用，解决吧。。。
2016年12月29日 11-11-51.png
先开始找属性，看有没有允许跳转页面重新reload的属性，找了半天没发现，再找代理吧，感觉这是导航出现的问题，找WKNavigationDelegate的代理方法试试。
找到这俩个能决定是否允许一个导航
- webView:decidePolicyForNavigationAction:decisionHandler:
//Decides whether to allow or cancel a navigation. - webView:decidePolicyForNavigationResponse:decisionHandler:
//Decides whether to allow or cancel a navigation after its response is known.
看看代理给里面参数里面是否有能判断出是否是打开一个新的页面
WKNavigationAction这个参数类里面有这么一个属性 嘿嘿，说是导航若开一个新窗口值为nil，先来试试
//The target frame, or nil if this is a new window navigation.
@property (nullable, nonatomic, readonly, copy) WKFrameInfo *targetFrame;
代码打印一下到底有啥区别
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
NSLog(@"targetFrame%@",navigationAction.targetFrame);
}
一运行崩了。。。。仔细一看应该是后面block参数没有用，看了下解释明白里面既然这是决定是否允许访问的代理，当然要回调一下啊。。。加上下面一句，参数是个枚举类型，一看就懂了，一个是允许，一个是取消。那这个地方可以做一些访问的过滤 来个允许：
// WKNavigationActionPolicyCancel,
// WKNavigationActionPolicyAllow,
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
NSLog(@"targetFrame%@",navigationAction.targetFrame);
decisionHandler(WKNavigationActionPolicyAllow);
}
然后点击看看有啥区别
1.点击本页跳转打印的东西
2016年12月29日 11-44-46.png
2.点击那个不跳的打印的东西 哈哈
2016年12月29日 11-48-03.png
这样能判断出来了吧，再就是解决让他跳啊，最终代理里代码如下
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
NSLog(@"targetFrame%@",navigationAction.targetFrame);
if (navigationAction.targetFrame==nil) {
[self.webView loadRequest:navigationAction.request];
}
decisionHandler(WKNavigationActionPolicyAllow);
}
点进去试试，成功~效果：
2016年12月29日 11-52-31.png
3.点进去后又有需求了....我要回去之前的页面啊，接着踩坑吧
碰巧最近发现一个比较好用的开源---让任意View都可以拖动 - WMDragView(就一个类,很简单实用)
正好练习一下，用这个做一个返回按钮
引入头文件 设置一个属性
#import "WMDragView.h"
@property (strong, nonatomic) WMDragView *backView;
添加进View中
//给他个位置
self.backView = [[WMDragView alloc] initWithFrame:CGRectMake(self.view.frame.size.width-50, self.view.frame.size.height-150, 50, 50)];
//圆角
self.backView.layer.cornerRadius = 25;
self.backView.backgroundColor= [UIColor colorWithRed:(223.0)/255.0 green:(107.0)/255.0 blue:(93.0)/255.0 alpha:0.8f];
//是不是保持在边界，默认为NO,没有黏贴边界效果
self.backView.isKeepBounds = YES;
//设置本地图片,可以设置网络图片
self.backView.imageView.image=[UIImage imageNamed:@"back"];
///点击事件
@weakify(self);
self.backView.ClickDragViewBlock = ^(WMDragView *dragView){
@strongify(self);
[self.webView goBack];
};
//限定logoView的活动范围
self.backView.freeRect = CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height-64);
[self.view addSubview:self.backView];
效果图片
2017年1月3日 11-42-53.png
接下来该解决返回的问题 有这个方法goBack,还有goForward直接用，很简单...
[self.webView goBack];
这下基本该有的应该都有了
