UIWebView上通过js获取图片并滑动浏览

显示图片用的是第三库MWPhotoBrowser，通过CocoaPods安装

https://github.com/mwaterfall/MWPhotoBrowser

一 、在-(void)webViewDidFinishLoad:(UIWebView *)webView中

1.获取图片的url地址

//调整字号

NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";

[webV stringByEvaluatingJavaScriptFromString:str];

//这里是js，主要目的实现对url的获取

static  NSString * const jsGetImages =

@"function getImages(){\

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

var imgScr = '';\

for(var i=0;i

imgScr = imgScr + objs[I].src + '+';\

};\

return imgScr;\

};";

[webV stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法

NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];

mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];

//urlResurlt 就是获取到得所有图片的url的拼接；mUrlArray就是所有Url的数组

if (mUrlArray.count >= 2) {

[mUrlArray removeLastObject];

}

2 给图片添加点击事件

[webV stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\

var imgs=document.getElementsByTagName('img');\

var length=imgs.length;\

for(var i=0;i

img=imgs[i];\

img.onclick = function(){\

window.location.href = 'image-preview:'+this.src}\

}\

};];

[webV stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];

3 给页面添加缩放功能

NSString *jsMeta = [NSString stringWithFormat:@"var meta = document.createElement('meta');meta.content='width=device-width,initial-scale=1.0,minimum-scale=.5,maximum-scale=3';meta.name='viewport';document.getElementsByTagName('head')[0].appendChild(meta);"];

[webV stringByEvaluatingJavaScriptFromString:jsMeta];

二、点击图片时，调用showBigImage方法去显示图片

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

//将url转换为string

NSString *requestString = [[request URL] absoluteString];

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

if ([requestString hasPrefix:@"image-preview:"]) {

NSString *imageUrl = [requestString substringFromIndex:@"image-preview:".length];

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

return NO;

}

return YES;

}

三、用第三库MWPhotoBrowser来显示图片

这些可以实现基本的图片点击显示大图，over