iOS web图片点击放大和左右滑动功能实现

使用WKWebview实现这个功能

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{ //加载页面完成

    //js方法遍历图片添加点击事件 返回图片个数
    /*这块我着重说几句
     逻辑:
     1.遍历获取全部的图片;
     2.生成一个Srting为所有图片的拼接,拼接时拿到所处数组下标;
     3.为图片添加点击事件,并添加数组所处下标
     注意点:
     1.如果仅仅拿到url而无下标的话,网页中如果有多张相同地址的图片 则会发生位置错乱
     2.声明时不要用 var 用 let  不然方法添加的i 永远是length的值
(这里有个bug,就是用let声明的话 在iOS8 和iOS9的系统下)注入js不成功 但是其他系统可以 用var的话就是每次点击都是最后一张

 for(let i=0;i<objs.length;i++){\
    imgScr = imgScr + objs[i].src +'YBindex'+ i +'Y+B';\
    objs[i].onclick=function(){\
    document.location=\"myweb:imageClick:\"+this.src + 'YBindex' + arg;\
    };\
    };\
在查阅了好多资料之后改成是用var声明之后可以完美解决这个问题

 for(var i=0;i<objs.length;i++){\
    imgScr = imgScr + objs[i].src +'YBindex'+ i +'Y+B';\
    (function(arg){\
    objs[arg].onclick=function(){\
    document.location=\"myweb:imageClick:\"+this.src + 'YBindex' + arg;\
    };\
    })(i); \
    };\
  //参考https://www.cnblogs.com/blogs-8888/p/6437350.html


     */
    static  NSString * const jsGetImages =
    @"function getImages(){\
    var objs = document.getElementsByTagName(\"img\");\
    var imgScr = '';\
    for(var i=0;i<objs.length;i++){\
    imgScr = imgScr + objs[i].src +'YBindex'+ i +'Y+B';\
    (function(arg){\
    objs[arg].onclick=function(){\
    document.location=\"myweb:imageClick:\"+this.src + 'YBindex' + arg;\
    };\
    })(i); \
    };\
    return imgScr;\
    };";

    [webView evaluateJavaScript:jsGetImages completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"运行:%@  %@",result,error);

    }];
    [webView evaluateJavaScript:@"getImages()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"运行:%@  %@",result,error);
        NSString *urlResurlt = result;
        allUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"Y+B"]];
        if (allUrlArray.count >= 2) {
            [allUrlArray removeLastObject];// 此时数组为每一个图片的url
        }

    }];

}

在下面函数中截获点击的事件和点击图片的下标

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {

    NSString *requestString = navigationAction.request.URL.absoluteString;
    //hasPrefix 判断创建的字符串内容是否以pic:字符开始
    
    NSLog(@"requestString:%@",requestString);
    if ([requestString hasPrefix:@"myweb:imageClick:"]) {
        NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
      
            [self showBigImage:imageUrl];//创建视图并显示图片


    }


    decisionHandler(WKNavigationActionPolicyAllow);

}

#pragma mark 显示大图片
-(void)showBigImage:(NSString *)imageUrl{
   
    NSMutableArray *allImagesUrl = [NSMutableArray array];
                 
    //分解出所有图片的链接地址
    for (int i = 0; i < allUrlArray.count; i++) {
        NSArray *imageIndex = [NSMutableArray arrayWithArray:[allUrlArray[i] componentsSeparatedByString:@"YBindex"]];
        NSString *imgStr = imageIndex.firstObject;
//这里出现了一个问题就是拿到的所有的图片有一个链接是web本身页面的地址 不知道怎么产生的 在这里判断下去掉
        if (![imgStr isEqualToString:requestURLString]) {
            [allImagesUrl addObject:imgStr];
        }
    }
    NSArray *imageIndex = [NSMutableArray arrayWithArray:[imageUrl componentsSeparatedByString:@"YBindex"]];
    
    //点击图片的下标(第几张)
    int i = [imageIndex.lastObject intValue];
    
    
    
    LLPhotoBrowser *photoBrowser = [[LLPhotoBrowser alloc] initWithImages:allImagesUrl currentIndex:i];
//    photoBrowser.delegate = self;
    [self presentViewController:photoBrowser animated:YES completion:nil];
    
    
    
}