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 *[email protected]"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);

}

时间: 2024-10-25 11:54:10

WKWebview点击图片查看大图的相关文章

移动端点击图片查看大图

一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小

JQuery function hideMax(){ $(".MAX_div").remove(); $("#Cover_Div").hide(); } function showMax(url){ $("#Cover_Div").show(); var Image=function(){ return document.createElement("img"); } var DIV=function(){ return do

android开发:点击缩略图查看大图

android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种方法我们可以使用自定义的AlertDialog来实现,代码如下: ImageView image=(ImageView)findViewById(R.id.small_image); image.setOnClickListener(new OnClickListener() { // 点击放大 p

每天一个JavaScript实例-点击图片显示大图添加鼠标操作

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图添加鼠标操作</title> <style> img{padding:5px;width:100px;height:aut

每天一个JavaScript实例-点击图片显示大图

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图</title> <style> img{padding:5px;width:100px;height:auto;} #o

ionic中点击图片看大图的实现

在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击图片时触发大图,代码如下: HTML: <div class="row padding"> <div class="col" style="width: 100px;height: 100px;padding:3px;-webkit-box-

iOS点击cell查看大图,点击大图还原小图-b

一.项目需求 用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片.点击放大的图片,图片缩小到原先的尺寸. 如图gif1.gif所示,点击中间的图片,放大图片,滑动图片.再点击大图,图片回到相应的位置. gif1.gif 如图gif2.gif所示.当前显示的图片不在屏幕中,点击大图后,若图片在屏幕顶部,则回到顶部:若在底部,则回到底部. gif2.gif 二.常见场景 微博.微信的相册:九宫格展示照片,点击某个图片,图片添加到scrollVi

iOS点击cell查看大图,点击大图还原小图

一.项目需求 用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片.点击放大的图片,图片缩小到原先的尺寸. 如图gif1.gif所示,点击中间的图片,放大图片,滑动图片.再点击大图,图片回到相应的位置. gif1.gif 如图gif2.gif所示.当前显示的图片不在屏幕中,点击大图后,若图片在屏幕顶部,则回到顶部:若在底部,则回到底部. gif2.gif 二.常见场景 微博.微信的相册:九宫格展示照片,点击某个图片,图片添加到scrollVi

iOS开发 之 WebView点击图片看大图效果

在webViewDelegate里面添加如下代码: - (void)webViewDidFinishLoad:(UIWebView *)aWebView {     //调整字号     NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";     [webView stringByEvaluatingJavaScriptFromString:str]