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

2017-03-22 本文已影响592人 ZhengYaWei

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);
}
}

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

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

2、显示关闭按钮

猜你喜欢

热点阅读