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 = [requestStringsubstringFromIndex:@"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);

}