WebView浏览图片、显示加载进度条、仿微信显示关闭按钮

WebView中浏览图片、显示加载进度、仿微信显示关闭按钮这三个功能在不同的项目中都有写到，今天就给稍微整理一下，将三个功能整合到一起，才能算是一个相对比较完整的WebView。
直接看效果图。Demo下载地址：https://github.com/ZhengYaWei1992/ZWWebView

效果图

1、网络加载进度条的展示

这个效果的实现主要是监听estimatedProgress属性实现的。具体实现请参照：http://www.jianshu.com/p/a16e05a1b302

2、显示关闭按钮

关闭按钮的显示和隐藏，其实实现起来主要注意一点便可，具体实现是在下面这个代理方法中。

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    
    NSString *requestString = navigationAction.request.URL.absoluteString;
    if ([requestString hasPrefix:@"myweb:imageClick:"]) {
        //获取单个照片地址
        NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
        //这里可以继续做一个简单的判断，如果图片网址是以gif结尾，可以用SDWebImage来加载gif图片
        [self showImageWithUrlString:imageUrl];
        
        decisionHandler(WKNavigationActionPolicyCancel);
    }else{
        //如果网页进入下一页面，显示返回按钮
        if (self.webView.canGoBack) {
            self.closeItem.hidden = NO;
        }else{//网页处于第一页面，隐藏返回按钮
            self.closeItem.hidden = YES;
        }
        //这个参数必须调用，类似于UIWebView开始加载的时候，返回的YES
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}```
核心是在这个判断上  `if (self.webView.canGoBack) `canGoBack是webView的一个属性，更具这个属性可以设置关闭按钮的显示和返回按钮的点击事件隐藏。关闭按钮的布局以及实现如下。
######2.1 布局关闭按钮和返回按钮

//设置导航栏Item

• (void)setupNavbarItem{
  UIView * backView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, 44)];
  UIButton * backItem = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 56, 44)];
  [backItem setImage:[UIImage imageNamed:@"back_arrow"] forState:UIControlStateNormal];
  [backItem setImageEdgeInsets:UIEdgeInsetsMake(0, -15, 0, 0)];
  [backItem setTitle:@"返回" forState:UIControlStateNormal];
  [backItem setTitleEdgeInsets:UIEdgeInsetsMake(0, -15, 0, 0)];
  [backItem setTitleColor:[UIColor colorWithRed:0.000 green:0.502 blue:1.000 alpha:1.000] forState:UIControlStateNormal];
  [backItem addTarget:self action:@selector(clickedBackItem:) forControlEvents:UIControlEventTouchUpInside];
  self.backItem = backItem;
  [backView addSubview:backItem];

  UIButton * closeItem = [[UIButton alloc]initWithFrame:CGRectMake(44+12, 0, 44, 44)];
  [closeItem setTitle:@"关闭" forState:UIControlStateNormal];
  [closeItem setTitleColor:[UIColor colorWithRed:0.000 green:0.502 blue:1.000 alpha:1.000] forState:UIControlStateNormal];
  [closeItem addTarget:self action:@selector(clickedCloseItem:) forControlEvents:UIControlEventTouchUpInside];
  closeItem.hidden = YES;
  self.closeItem = closeItem;
  [backView addSubview:closeItem];

  UIBarButtonItem * leftItemBar = [[UIBarButtonItem alloc]initWithCustomView:backView];
  self.navigationItem.leftBarButtonItem = leftItemBar;
  }

######2.2 返回按钮点击事件
这要要控制返回按钮，当前加载的网页为首页的时候点击返回会返回上一界面，如果加载的网页不是首页，即显示了关闭按钮，这时点击返回按钮，webView会返回到上一页面。

• (void)clickedBackItem:(UIBarButtonItem *)btn{
  if (self.webView.canGoBack) {
  [self.webView goBack];
  self.closeItem.hidden = NO;
  }else{
  [self clickedCloseItem:nil];
  }
  }

######2.1 关闭按钮点击事件

• (void)clickedCloseItem:(UIButton *)btn{
  [self.navigationController popViewControllerAnimated:YES];
  }

###3、浏览网页图片
弱项浏览网页的图片，第一步要做的是在网页加载成功的时候注入JS代码，更改`document.location`,之后在加载网页的时候根据`document.location`来区分发起的网络请求是否已是浏览图片。如这里就是将`document.location`改为myweb:imageClick:\"+this.src  其中，src是图片的地址。

• (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
  //拼接js的代码
  NSMutableString *stringM = [NSMutableString string];
  //和预览图片相关的JS
  //要加上这两句代码 否则网页图片不显示，仅显示蓝色小标记
  [stringM appendString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%';"];
  [stringM appendString:@"function getImages(){var objs = document.getElementsByTagName("img");for(var i=0;i<objs.length;i++){objs[i].onclick=function(){document.location="myweb:imageClick:"+this.src;};};return objs.length;};"];
  //注入JS
  //[webView stringByEvaluatingJavaScriptFromString:stringM];//UIWebView UIWebView的注入方式
  [webView evaluateJavaScript:stringM completionHandler:nil];
  //注入自定义的js方法后别忘了调用 否则不会生效
  [webView evaluateJavaScript:@"getImages();" completionHandler:nil];
  }

加载网络网页的时候根据url来区分点击的是否为图片对应的地址。如果是就调用`  [self showImageWithUrlString:imageUrl];`方法，传入URL显示图片。具体实现请看demo，demo下载地址在文章最上面。

• (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

  NSString *requestString = navigationAction.request.URL.absoluteString;
  if ([requestString hasPrefix:@"myweb:imageClick:"]) {
  //获取单个照片地址
  NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
  //这里可以继续做一个简单的判断，如果图片网址是以gif结尾，可以用SDWebImage来加载gif图片
  [self showImageWithUrlString:imageUrl];

    decisionHandler(WKNavigationActionPolicyCancel);
  

  }else{
  //如果网页进入下一页面，显示返回按钮
  if (self.webView.canGoBack) {
  self.closeItem.hidden = NO;
  }else{//网页处于第一页面，隐藏返回按钮
  self.closeItem.hidden = YES;
  }
  //这个参数必须调用，类似于UIWebView开始加载的时候，返回的YES
  decisionHandler(WKNavigationActionPolicyAllow);
  }
  }