今天公司要求在店铺详情里添加图片点击事件，即让图片可以放大缩小。原本觉得在上家公司做过这个，没什么难得，没想到接手这个APP用的UIWebView来展示图片，顿时让我一脸懵逼，由于自己之前没怎么接触过这个与H5的交互。折腾了好久，幸亏最后还是弄出来了。废话不多说了，进入正题！！！！
总的分两步
1.获取点击的图片地址
2.展示出来
1.获取点击的图片的地址
先遵守UIWebViewDelegate，然后在
- (void)webViewDidFinishLoad:(UIWebView *)webView{}
收集JS页面传来的图片以及添加图片点击事件，代码如下:
#pragma mark -- wsx 收集JS页面传来的图片及添加图片点击事件
-(void)getImagesFromJSAndClickImgEvent:(UIWebView *)webView{
//这里是JS，主要目的: - 获取H5图片的url
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
};\
return imgScr;\
};";
[webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入JS方法
//添加图片可点击JS
[webView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location.href='image-preview:'+this.src}\
}\
}"];
[webView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];
}
最后你就可以在
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {}
实现图片的放大缩小等操作，具体代码如下:
#pragma mark -UIWebViewDelegate
//在这个方法中捕获到图片的点击事件和被点击图片的url
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
//预览图片
if ([request.URL.scheme isEqualToString:@"image-preview"]) {
NSString* clickedImgURL = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
clickedImgURL = [clickedImgURL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];//path 就是被点击图片的url
NSInteger count = 0;//计数变量
for (NSString *imgURL in showImageList) {
//比对数组中的图片URL与选定图片的URL
NSArray *arrFirst = [imgURL componentsSeparatedByString:@"/"];
NSArray *arrSecond = [clickedImgURL componentsSeparatedByString:@"/"];
if ([[arrFirst lastObject] isEqualToString:[arrSecond lastObject]]) {
#pragma mark -图片点击20171011
[XLPhotoBrowser showPhotoBrowserWithImages:showImageList currentImageIndex:count];
return NO;
}
count ++;
}
return NO;
}
return YES;
}
XLPhotoBrowser的使用具体我就不多讲了，想要了解的话，可以参考iOS图片浏览器 - XLPhotoBrowser(类似微信多图片浏览效果)
由于我们公司的服务器那传来的数据是这样的：
content = "<p><img src=\"http://uapp.invtech.cn/includes/ueditor/php/../../../bdimages/upload1/20170713/1499960741342826.gif\" style=\"float:none;\" title=\"900-500.gif\"/></p><p><img src=\"http://uapp.invtech.cn/includes/ueditor/php/../../../bdimages/upload1/20170713/1499960741347796.gif\" style=\"float:none;\" title=\"900-5002.gif\"/></p><p><img src=\"http://uapp.invtech.cn/includes/ueditor/php/../../../bdimages/upload1/20170713/1499960742284618.gif\" style=\"float:none;\" title=\"900-5003.gif\"/></p><p><br/></p>";
所以我自己写了个方法把里面的图片地址提取出来，代码如下：
#pragma mark -截取图片字符串
-(NSArray *)interceptPhotoArrFromString:(NSString *)str
{
NSMutableArray *imageNamesMut = [NSMutableArray array];
NSArray *contentArray = [str componentsSeparatedByString:@" "];
for (NSString *string in contentArray) {
NSRange rang = [string rangeOfString:@"="];
if (rang.location != NSNotFound) {
NSArray *arr = [string componentsSeparatedByString:@"="];
if ([[arr firstObject] isEqualToString:@"src"]) {
NSMutableString *mutStr = [NSMutableString stringWithString:[arr lastObject]];
NSString *imageName = [mutStr stringByReplacingOccurrencesOfString:@"\"" withString:@""];
[imageNamesMut addObject:imageName];
}
}
}
return imageNamesMut;
}
以上是我今天重新弄得图片浏览器事件，比较麻烦的还是那个图片地址的获取和点击UIWebView获取当前点击图片的地址，毕竟我们可以直接使用XLPhotoBrowser这个第三方，只要传入图片数组和点击的下标，一行代码就可以实现。写的虽然不怎样，不过还是希望这些能帮助到别人，如果有什么好的修改，麻烦提出来，谢谢！！！
参考文献：
iOS 获取Web图片并添加点击事件
