WebView点击图片看大图效果

• 在webViewDelegate里面添加如下代码：

• ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  - (void)webViewDidFinishLoad:(UIWebView *)aWebView {       //调整字号     NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";     [webView stringByEvaluatingJavaScriptFromString:str];           //js方法遍历图片添加点击事件 返回图片个数     static  NSString * const jsGetImages =     @"function getImages(){\     var objs = document.getElementsByTagName(\"img\");\                                              for(var i=0;i<objs.length;i++){\                                                  objs[i].onclick=function(){\                                                      document.location=\"myweb:imageClick:\"+this.src;\                                                  };\                                              };\                                              return objs.length;\                                              };";           [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法           //注入自定义的js方法后别忘了调用 否则不会生效（不调用也一样生效了，，，不明白）     NSString *resurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];     //调用js方法 //    NSLog(@"---调用js方法--%@  %s  jsMehtods_result = %@",self.class,__func__,resurlt); }

• ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{     //将url转换为string     NSString *requestString = [[request URL] absoluteString]; //    NSLog(@"requestString is %@",requestString);           //hasPrefix 判断创建的字符串内容是否以pic:字符开始     if ([requestString hasPrefix:@"myweb:imageClick:"]) {         NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length]; //        NSLog(@"image url------%@", imageUrl);                   if (bgView) {             //设置不隐藏，还原放大缩小，显示图片             bgView.hidden = NO;             imgView.frame = CGRectMake(10, 10, SCREEN_WIDTH-40, 220);             [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];         }         else             [self showBigImage:imageUrl];//创建视图并显示图片                   return NO;     }     return YES; }

• 创建放大图片的视图

• ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

  #pragma mark 显示大图片 -(void)showBigImage:(NSString *)imageUrl{     //创建灰色透明背景，使其背后内容不可操作     bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];     [bgView setBackgroundColor:[UIColor colorWithRed:0.3                                                green:0.3                                                 blue:0.3                                                alpha:0.7]];     [self.view addSubview:bgView];           //创建边框视图     UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH-20, 240)];     //将图层的边框设置为圆脚     borderView.layer.cornerRadius = 8;     borderView.layer.masksToBounds = YES;     //给图层添加一个有色边框     borderView.layer.borderWidth = 8;     borderView.layer.borderColor = [[UIColor colorWithRed:0.9                                                     green:0.9                                                      blue:0.9                                                     alpha:0.7] CGColor];     [borderView setCenter:bgView.center];     [bgView addSubview:borderView];           //创建关闭按钮     UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom]; //    [closeBtn setImage:[UIImage imageNamed:@"close.png"] forState:UIControlStateNormal];     closeBtn.backgroundColor = [UIColor redColor];     [closeBtn addTarget:self action:@selector(removeBigImage) forControlEvents:UIControlEventTouchUpInside];     [closeBtn setFrame:CGRectMake(borderView.frame.origin.x+borderView.frame.size.width-20, borderView.frame.origin.y-6, 26, 27)];     [bgView addSubview:closeBtn];           //创建显示图像视图     imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, CGRectGetWidth(borderView.frame)-20, CGRectGetHeight(borderView.frame)-20)];     imgView.userInteractionEnabled = YES;     [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];     [borderView addSubview:imgView];           //添加捏合手势     [imgView addGestureRecognizer:[[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)]];       }

• 实现关闭和捏合手势的方法

• ?

  1 2 3 4 5 6 7 8 9 10 11 12

  //关闭按钮 -(void)removeBigImage {     bgView.hidden = YES; }   - (void) handlePinch:(UIPinchGestureRecognizer*) recognizer {     //缩放:设置缩放比例     recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);     recognizer.scale = 1; }

效果图如下

 

 

 

 

<div>
<img width="320.000000" height="300.000000" src="http://114.215.171.217:80/image/f?fileName=null_1436866458461.jpg" onclick="imageClick()">
<script type="text/javascript">
function imageClick(){document.location = "ClickImage:"}
</script>
<br />
</div>

附上我的html代码

 

 

 

 

 

 

http://my.oschina.net/linxiaoxi1993/blog/465905?p={{page}}