[原创]WKWebview点击图片查看大图

大家都知道，WKWebview是没有查看大图的属性或者方法的，所以只能通过js与之交互来实现这一功能，原理：通过js获取页面的图片，把它存放到数组，给图片添加点击事件，通过index显示大图就行了

其实很简单，给WKWebview写个类别，添加两个方法就行了，然后在WKWebview的两个协议中调用下这两个方法就行了

首先声明个数组来接收图片数组，可是有个问题，那就是类别是声明不了属性的，那怎么办呢？我们可以通过runtime来设置属性，runtime非常有用，我们以后的篇章会说到。

static char imgUrlArrayKey;

- (void)setMethod:(NSArray *)imgUrlArray

{

    objc_setAssociatedObject(self, &imgUrlArrayKey, imgUrlArray, OBJC_ASSOCIATION_RETAIN_NONATOMIC);

}

 

- (NSArray *)getImgUrlArray

{

    returnobjc_getAssociatedObject(self, &imgUrlArrayKey);

}

这样就声明了个数组

 

方法一：通过js获取网页图片数组

/*

 *通过js获取htlm中图片url

 */

-(NSArray *)getImageUrlByJS:(WKWebView *)wkWebView

{

 

    //查看大图代码

    //js方法遍历图片添加点击事件返回图片个数

    static  NSString * const jsGetImages =

    @"function getImages(){\

    var objs = document.getElementsByTagName(\"img\");\

    var imgUrlStr='';\

    for(var i=0;i<objs.length;i++){\

    if(i==0){\

    if(objs[i].alt==''){\

    imgUrlStr=objs[i].src;\

    }\

    }else{\

    if(objs[i].alt==''){\

    imgUrlStr+='#'+objs[i].src;\

    }\

    }\

    objs[i].onclick=function(){\

    if(this.alt==''){\

    document.location=\"myweb:imageClick:\"+this.src;\

    }\

    };\

    };\

    return imgUrlStr;\

    };";

    

    //用js获取全部图片

    [wkWebView evaluateJavaScript:jsGetImages completionHandler:^(id Result, NSError * error) {

        NSLog(@"js___Result==%@",Result);

        NSLog(@"js___Error -> %@", error);

    }];

    

 

    NSString *js2=@"getImages()";

    

    __block NSArray *array=[NSArray array];

    [wkWebView evaluateJavaScript:js2 completionHandler:^(id Result, NSError * error) {

        NSLog(@"js2__Result==%@",Result);

        NSLog(@"js2__Error -> %@", error);

        

        NSString *resurlt=[NSString stringWithFormat:@"%@",Result];

        

        if([resurlt hasPrefix:@"#"])

        {

            resurlt=[resurlt substringFromIndex:1];

        }

        NSLog(@"result===%@",resurlt);

        array=[resurlt componentsSeparatedByString:@"#"];

        NSLog(@"array====%@",array);

        [wkWebView setMethod:array];

    }];

    

    return array;

}

 

方法二：显示大图

//显示大图

-(BOOL)showBigImage:(NSURLRequest *)request

{

    //将url转换为string

    NSString *requestString = [[request URL] absoluteString];

    

    //hasPrefix 判断创建的字符串内容是否以pic:字符开始

    if ([requestString hasPrefix:@"myweb:imageClick:"])

    {

        NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];

        NSLog(@"image url------%@", imageUrl);

        

        NSArray *imgUrlArr=[self getImgUrlArray];

        NSInteger index=0;

        for (NSInteger i=0; i<[imgUrlArr count]; i++) {

            if([imageUrl isEqualToString:imgUrlArr[i]])

            {

                index=i;

                break;

            }

        }

        

        [WFImageUtilshowImgWithImageURLArray:[NSMutableArrayarrayWithArray:imgUrlArr] index:index myDelegate:nil];

        

        return NO;

    }

    returnYES;

}

在WKWebview协议中调用上面两个类别的方法

// 类似 UIWebView 的 －webViewDidFinishLoad:

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation

{

    //通过js获取htlm中图片url

    [webView getImageUrlByJS:webView];

}

 

// 类似 UIWebView 的 -webView: shouldStartLoadWithRequest: navigationType:

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

    

    [webView showBigImage:navigationAction.request];

    

    decisionHandler(WKNavigationActionPolicyAllow);

}