美文网首页webView与APP
ios webView简单点击展示图片

ios webView简单点击展示图片

作者: Shin_R | 来源:发表于2017-10-08 18:39 被阅读49次
    • 在webView中的代理方法中插入js代码,对图片进行点击操作
    - (void)webViewDidFinishLoad:(IMYWebView *)webView
    {
       self.finishLoad = YES;
    
       //    插入js代码,对图片进行点击操作
       [webView evaluateJavaScript:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0; i < length;i++){img=imgs[i];if(\"ad\" ==img.getAttribute(\"flag\")){var parent = this.parentNode;if(parent.nodeName.toLowerCase() != \"a\")return;}img.onclick=function(){window.location.href='image-preview:'+this.src}}}" completionHandler:^(id object, NSError *error) {
           
       }];
       [webView evaluateJavaScript:@"assignImageClickAction();" completionHandler:^(id object, NSError *error) {
           
       }];
    
       //获取HTML中的图片
       [self getImgs];
       
    }
    
    • 获取文章图片个数的方法
    #pragma mark -- 获取文章中的图片个数
    - (NSArray *)getImgs
    {
    
        NSMutableArray *arrImgURL = [[NSMutableArray alloc] init];
        for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) {
            NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].src", i];
            [_htmlWebView evaluateJavaScript:jsString completionHandler:^(NSString *str, NSError *error) {
    
                if (error ==nil) {
                    [arrImgURL addObject:str];
                }
    
            }];
        }
        _imageArray = [NSMutableArray arrayWithArray:arrImgURL];
    
    
        return arrImgURL;
    }
    
    // 获取某个标签的结点个数
    - (NSInteger)nodeCountOfTag:(NSString *)tag
    {
    
        NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('%@').length", tag];
    
       int count =  [[_htmlWebView stringByEvaluatingJavaScriptFromString:jsString] intValue];
    
        return count;
    }
    
    • 在webView中的代理方法中获取到图片的url
    -(BOOL)webView:(IMYWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
                 navigationType:(UIWebViewNavigationType)navigationType
    {
        if ([request.URL.absoluteString isEqualToString:@"about:blank"])
        {
            return YES;
        }
        if ([request.URL.scheme isEqualToString: @"image-preview"])
        {
            NSString *url = [request.URL.absoluteString substringFromIndex:14];
            //启动图片浏览器, 跳转到图片浏览页面
            if (_imageArray.count != 0) {
                [self showBigImage:url];
            }
            return NO;
        }
    
    • 创建灰色背景及显示图片
    -(void)showBigImage:(NSString *)imageUrl{
       //创建灰色透明背景,使其背后内容不可操作
       UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, LAScreenWidth, LAScreenHeight)];
       UITapGestureRecognizer * removeTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(removeBigImage)];
       [bgView addGestureRecognizer:removeTap];
       [bgView setBackgroundColor:[UIColor colorWithRed:0.3
                                                  green:0.3
                                                   blue:0.3
                                                  alpha:1]];
       self.bgView = bgView;
       [[UIApplication sharedApplication].keyWindow addSubview:self.bgView];
    
       //创建显示图像视图
      UIImageView *imgView = [[UIImageView alloc] initWithFrame:bgView.frame];
       imgView.contentMode = UIViewContentModeScaleAspectFit;    
       imgView.userInteractionEnabled = YES;
       [imgView sd_setImageWithURL:[NSURL URLWithString:imageUrl]];
       [bgView addSubview:imgView];
    
       //添加捏合手势  
       [imgView addGestureRecognizer:[[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)]];
       UITapGestureRecognizer * imgRemove = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(removeBigImage)];
       [imgView addGestureRecognizer:imgRemove];
    
    }
    
    • 关闭视图
    -(void)removeBigImage
    {
        [self.bgView removeFromSuperview];
    }
    
    • 设置放大缩放比例
    - (void) handlePinch:(UIPinchGestureRecognizer*) recognizer
    {
        //缩放:设置缩放比例
        recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
        recognizer.scale = 1;
    }
    

    相关文章

      网友评论

        本文标题:ios webView简单点击展示图片

        本文链接:https://www.haomeiwen.com/subject/slkyyxtx.html