一起学习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];

这下基本该有的应该都有了