公司有个需求是一个webview页面里的图片点击会放大，支持保存功能，在网上找了很多资料，也没用一个合适的，决定自己写一个，效果如下：
photoBrower.gif
废话不多说，先上代码：实现代码
实现思路：
加载完成时候，遍历找到对应的图片标签，给图片添加点击事件，并保存所有图片的链接，之后就是正常的展示功能了，我的展示效果使用的是SDPhotoBrowser，感谢这些提供开源框架的作者，大大的方便了我们的开发时间。
下面一步一步讲解：
我写了一个类
XMGPhotoBrowerWebView继承自UIWebView，自己遵循自己的代理，并实现代理方法；-
在
webViewDidFinishLoad:方法中添加如下代码：为图片添加点击事件，并设置事件的协议头为
image-preview[self stringByEvaluatingJavaScriptFromString:@"function assignImageClickAction(){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}}}"]; [self stringByEvaluatingJavaScriptFromString:@"assignImageClickAction();"]; // [ webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];//禁止用户选择 [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout=‘none‘;"];//禁止长按遍历所有图片标签
img，找到所含图片的链接//获取所有图片链接 - (NSMutableArray *)getImgs { NSMutableArray *arrImgURL = [[NSMutableArray alloc] init]; int node = [self nodeCountOfTag:@"img"]; for (int i = 0; i < node; i++) { NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].src", i]; NSString *img = [self stringByEvaluatingJavaScriptFromString:jsString]; [arrImgURL addObject:img]; } return arrImgURL; }
获取img标签的结点个数
//获取某个标签的结点个数
- (int)nodeCountOfTag:(NSString *)tag {
NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('%@').length", tag];
int len = [[self stringByEvaluatingJavaScriptFromString:jsString] intValue]; return len;
}
-
获取这些图片链接，用
UIImageView加载这些链接，并把图片保存到全局数组里，以便浏览时候使用_imageUrlArray= [self getImgs];//获取所有图片链接 NSMutableArray *array=[[ NSMutableArray alloc] init]; for (NSString *string in _imageUrlArray) //剔除没有规则的图集 { // 按照自己的规则去剔除不同的图片（我这里没有剔除） // if ([string hasSuffix:@".png"]||[string hasSuffix:@".jpg"]||[string hasSuffix:@".jpeg"]) // { [array addObject:string]; // } } _imageUrlArray=array; _imageArray = [NSMutableArray array]; for (NSInteger i = 0; i < _imageUrlArray.count; i++) { UIImageView *view = [[UIImageView alloc] init]; [_imageArray addObject:view]; [view sd_setImageWithURL:_imageUrlArray[i] placeholderImage:[UIImage imageNamed:@""]]; [_contenterView addSubview:view]; } 在
webView:shouldStartLoadWithRequest:navigationType:方法里监听图片的点击事件，弹出浏览页面
//预览图片
if ([request.URL.scheme isEqualToString:@"image-preview"]) {
NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
for (NSInteger i = 0; i<_imageUrlArray.count; i++) {
if ([path isEqualToString:_imageUrlArray[i]]) {
_index = i;
}
}
SDPhotoBrowser *browser = [[SDPhotoBrowser alloc] init];
browser.currentImageIndex = _index;
browser.sourceImagesContainerView = _contenterView;
browser.imageCount = _imageUrlArray.count;
browser.delegate = self;
[browser show];
return NO;
}
至此已经完成了，webview加载的网页图片浏览功能，我自己提出了一些方法，方便你使用，如果有帮助，欢迎点赞！！
使用方法详情请见代码地址
