大家都知道,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);

}

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

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

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

  2. 点击图片查看大图(纯js)

    $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...

  3. jQuery插件——imgbox(点击图片查看大图)

    需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...

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

    方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){ $(".MAX_div").remove(); $("#Cover_Div ...

  5. jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

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

    android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...

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

    在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击 ...

  8. 点击小图查看大图jQuery插件FancyBox魔幻灯箱

    今日发现一个不错的JQuery插件FancyBox,也许早就有这个插件了,但是没名字,我就暂且叫他魔幻灯箱吧,采用Mac系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...

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

    一.项目需求 用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片.点击放大的图片,图片缩小到原先的尺寸. 如图gif1.gif所示,点击中间的图 ...

随机推荐

  1. POJ 1584 A Round Peg in a Ground Hole 判断凸多边形,判断点在凸多边形内

    A Round Peg in a Ground Hole Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5456   Acc ...

  2. datediff(),dateadd(),datepart().datename()时间处理函数

    原文链接:http://www.cnblogs.com/whz111/articles/2445777.html --convert(时间)对应数字表示的时间格式 select CONVERT(var ...

  3. android编译系统学习

    近日接手了后续android新平台项目搭建的任务. 本文内容基于sprd公司提供的android5.1源码. 一.一般的编译工作流程 我们代码一般情况下是从芯片商SPRD/MTK获得的. 源码的编译上 ...

  4. 运用linq查找所有重复的元素

    如题: 有一个List<string>类型的List<T> List<String> list = "};` 需要返回结果List包含 {"6& ...

  5. 【OpenSSL】创建证书

    [-] 1生成根证书 1 生成RSA私钥 2 生成证书请求 3 签发自签名证书 2 生成用户证书 1 生成RSA私钥 2 生成证书请求 3 签发证书   1)生成根证书 1.1) 生成RSA私钥 op ...

  6. SSM框架入门和搭建 十部曲

    又快到毕业设计的时候了,有的学弟说想用ssm做毕业设计,在网上找到资料看不懂,基础差.我就帮他写了一个demo,顺便也整理一下. SSM框架,顾名思义,就是Spring+SpringMVC+mybat ...

  7. POJ 2010 Moo University - Financial Aid( 优先队列+二分查找)

    POJ 2010 Moo University - Financial Aid 题目大意,从C头申请读书的牛中选出N头,这N头牛的需要的额外学费之和不能超过F,并且要使得这N头牛的中位数最大.若不存在 ...

  8. C++中L和_T()之区别(转)

    C++中L和_T()之区别 分类: C/C++2011-01-12 11:45 2878人阅读 评论(1) 收藏 举报 c++编译器apic 字符串前面加L表示该字符串是Unicode字符串._T是一 ...

  9. uvalive 5721 Activation (概率dp+方程)

    题目链接:http://vjudge.net/problem/viewProblem.action?id=24999 主要思想就是解方程的思想. 二维dp应该很容易想到,就是当前位置加队伍长度. dp ...

  10. zend studio设置

    1.字体设置: 第一步:进入设置窗口    windows -> preferences 第二步:进入修改字体的选项卡.    General -> Appearance -> Co ...