ios html 图片放大缩小,iOS web图片点击放大和左右滑动功能实现

使用WKWebview实现这个功能

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

{ //加载页面完成

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

/*这块我着重说几句

逻辑:

1.遍历获取全部的图片;

2.生成一个Srting为所有图片的拼接,拼接时拿到所处数组下标;

3.为图片添加点击事件,并添加数组所处下标

注意点:

1.如果仅仅拿到url而无下标的话,网页中如果有多张相同地址的图片 则会发生位置错乱

2.声明时不要用 var 用 let 不然方法添加的i 永远是length的值

(这里有个bug,就是用let声明的话 在iOS8 和iOS9的系统下)注入js不成功 但是其他系统可以 用var的话就是每次点击都是最后一张

for(let i=0;i

imgScr = imgScr + objs[i].src +'YBindex'+ i +'Y+B';\

objs[i].οnclick=function(){\

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

};\

};\

在查阅了好多资料之后改成是用var声明之后可以完美解决这个问题

for(var i=0;i

imgScr = imgScr + objs[i].src +'YBindex'+ i +'Y+B';\

(function(arg){\

objs[arg].οnclick=function(){\

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

};\

})(i); \

};\

//参考https://www.cnblogs.com/blogs-8888/p/6437350.html

*/

static NSString * const jsGetImages =

@"function getImages(){\

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

var imgScr = '';\

for(var i=0;i

imgScr = imgScr + objs[i].src +'YBindex'+ i +'Y+B';\

(function(arg){\

objs[arg].οnclick=function(){\

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

};\

})(i); \

};\

return imgScr;\

};";

[webView evaluateJavaScript:jsGetImages completionHandler:^(id _Nullable result, NSError * _Nullable error) {

NSLog(@"运行:%@ %@",result,error);

}];

[webView evaluateJavaScript:@"getImages()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {

NSLog(@"运行:%@ %@",result,error);

NSString *urlResurlt = result;

allUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"Y+B"]];

if (allUrlArray.count >= 2) {

[allUrlArray removeLastObject];// 此时数组为每一个图片的url

}

}];

}

在下面函数中截获点击的事件和点击图片的下标

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

NSString *requestString = navigationAction.request.URL.absoluteString;

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

NSLog(@"requestString:%@",requestString);

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

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

[self showBigImage:imageUrl];//创建视图并显示图片

}

decisionHandler(WKNavigationActionPolicyAllow);

}

#pragma mark 显示大图片

-(void)showBigImage:(NSString *)imageUrl{

NSMutableArray *allImagesUrl = [NSMutableArray array];

//分解出所有图片的链接地址

for (int i = 0; i < allUrlArray.count; i++) {

NSArray *imageIndex = [NSMutableArray arrayWithArray:[allUrlArray[i] componentsSeparatedByString:@"YBindex"]];

NSString *imgStr = imageIndex.firstObject;

//这里出现了一个问题就是拿到的所有的图片有一个链接是web本身页面的地址 不知道怎么产生的 在这里判断下去掉

if (![imgStr isEqualToString:requestURLString]) {

[allImagesUrl addObject:imgStr];

}

}

NSArray *imageIndex = [NSMutableArray arrayWithArray:[imageUrl componentsSeparatedByString:@"YBindex"]];

//点击图片的下标(第几张)

int i = [imageIndex.lastObject intValue];

LLPhotoBrowser *photoBrowser = [[LLPhotoBrowser alloc] initWithImages:allImagesUrl currentIndex:i];

// photoBrowser.delegate = self;

[self presentViewController:photoBrowser animated:YES completion:nil];

}