webView图片点击可以实现预览效果

　　最近做项目遇到了webview加载后图片点击可以实现图片预览效果的需求。

　　如果要实现这个需求我们要保证webview和html是交互的否则我们加载的webview上面的图片是不能实现点击效果的。那么如何实现交互呢，其实很简单，我们只需要往调用的webview页面里加入一段js代码就可以了

一：我们创建一个js的方法：

//创建JS

- (NSString *)createJavaScript

{

    NSString *js = @"var imgArray = document.getElementsByTagName(‘img‘);for(var i = 0; i < imgArray.length; i++){var img = imgArray[i];img.onclick=function(){var url=‘lfyprotocol:‘+this.src;document.location = url;}}";

    return js;

}

二：我们在webViewDidFinishLoad实现以下调用就可以了：

 NSString *str = [webView stringByEvaluatingJavaScriptFromString:[self createJavaScript]];

 NSLog(@"--------finish=%@",str);

三：图片实现点击效果之后的实现方法要在

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType这个方法中实现

按照前两步执行，我们在这个方法中NSLog(@"图片是可点击的"); 我们会很愉快的发现我们成功的输出了内容。

四：当然我们要的不仅仅是输图片可点的消息，

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

        NSArray *components = [requestURL componentsSeparatedByString:@":"];

        NSLog(@"%@",components);

        if ([components count]>1&&[(NSString *)[components objectAtIndex:0] isEqualToString:@"lfyprotocol"]) {

            if ([(NSString *)[components objectAtIndex:1] isEqualToString:@"http"]||[(NSString *)[components objectAtIndex:1] isEqualToString:@"https"] ) {

                            //图片的路径

                           NSString *path = [NSString stringWithFormat:@"%@:%@",[components objectAtIndex:1],[components objectAtIndex:2]];

                            NSLog(@"%@",path);

                          UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"图片地址" message:path delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];

                            [alert show];

                            [alert release];

                            NSLog(@"%@",self.imgConArray);

                            for (int i = 0; i < [self.imgConArray count]; i++) {

                                NSString *url = [[imgConArray objectAtIndex:i] objectForKey:@"data-original"];

                                NSString *astring = [[imgConArray objectAtIndex:i] objectForKey:@"title"];

                                NSLog(@"-----%@-----%@----",url,astring);

                            }

}

通过这个方法我们的图片url就成功的获取到了，当然这只是获取到的我们所点击的图片的路径，如果你想获取到html里面所有的图片url那么：

你需要对html进行遍历：

abRequest =[[NSURLRequest requestWithURL:[NSURL URLWithString:self.URLString]] retain];

NSData *ceResponse = [NSURLConnection sendSynchronousRequest:abRequest returningResponse:nil error:nil];

        TFHpple *doc = [[TFHpple alloc] initWithHTMLData:ceResponse];

        NSArray *images = [doc searchWithXPathQuery:@"//img"];

        for (int i = 0; i < [images count]; i ++) {

            TFHppleElement *dic = [images objectAtIndex:i];

            NSString *imgUrl = [dic objectForKey:@"data-original"];

            NSLog(@"%@=====",imgUrl);

            NSString *imgTitle = [dic objectForKey:@"title"];

            [self.imgConArray addObject:imgUrl];

            [self.titleArray addObject:imgTitle];

        }

 这个方法中我们用到了一个第三方的类TFHpple我们用它对html进行遍历。相信获取到所有图片的链接之后的预览对你来说就是小菜一碟了。如果你有点懒不想写的话推荐你一个第三类MWPhotoBrowser，他可以很好地帮你实现预览图片的效果。