iOS抓取web页图片并显示

实现思路

目前ios原生接入web页有两种方式:UIWebView和WKWebView。所以本文两种方式都会介绍方式，思路大同小异，实现方式略微有点区别。周知h5与oc可以双向沟通，所以我们可以注入js脚本，获取js事件回调即可得到需要的信息。

获取图片的js脚本

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 + '+';\
};\
return imgScr;\
};";

设置点击图片事件的js脚本

static NSString * const jsClickImage =
@"function registerImageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location.href='image-preview:'+this.src}\
}\
}";

UIWebView

#import "ViewController.h"

//获取web页所有图片的js
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 + '+';\
};\
return imgScr;\
};";

//设置web页点击图片的js
static NSString * const jsClickImage =
@"function registerImageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location.href='image-preview:'+this.src}\
}\
}";

@interface ViewController ()<UIWebViewDelegate>

@property (strong, nonatomic) NSMutableArray *mUrlArray;//图片URL数组

@end

@implementation ViewController

- (void)viewDidLoad
 {
    [super viewDidLoad];
    
    [self loadWebView];
}

//加载WebView
- (void)loadWebView
{
    NSString *htmURL = @"http://finance.ifeng.com/a/20170703/15505126_0.shtml";//注意到plist中允许加载http请求
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    webView.delegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:htmURL]]];
    [self.view addSubview:webView];
}

//在这个方法中捕获到图片的点击事件和被点击图片的url
-  (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 
{
    //预览图片
    if  ([request.URL.scheme isEqualToString:@"image-preview"])  {
        NSString* clickedImgURL = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
        clickedImgURL = [clickedImgURL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];//path 就是被点击图片的url
        NSInteger count = 0;//计数变量
        for (NSString *imgURL in _mUrlArray) {
            //比对数组中的图片URL与选定图片的URL
            if ([imgURL isEqualToString:clickedImgURL]) {
                //第三方图片浏览器
//              NSString *userid =@"";//用户id
//              [self showPhotoBrower:_mUrlArray andIndex:count dataArray:@[] isSelf:NO authId:userid];
                return NO;
            }
            count ++;
        }
        return NO;
    }
    return YES;
}

//webView结束加载
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [self getImagesFromJSAndClickImgEvent:webView];
}

//收集JS页面传来的图片及添加图片点击事件
- (void)getImagesFromJSAndClickImgEvent:(UIWebView *)webView
{
    //注入获取图片的js方法
    [webView stringByEvaluatingJavaScriptFromString:jsGetImages];
    //urlResurlt - 调用js并获取到H5页面上所有图片的url的拼接
    NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
    //mUrlArray就是所有图片URL的数组
    _mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
    
    //注入图片可点击JS
    [webView stringByEvaluatingJavaScriptFromString:jsClickImage];
    [webView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];
}

@end

WKWebView

// 页面加载完成之后调用 此方法会调用多次
#pragma mark - 收集JS页面传来的图片及添加图片点击事件
- (void)getImagesFromJSAndClickImgEvent:(WKWebView *)webView
{
    [webView evaluateJavaScript:jsGetImages completionHandler:nil];
    @weakify(self);
    [webView evaluateJavaScript:@"getImages()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        @strongify(self);
        self.mUrlArray = [NSMutableArray arrayWithArray:[result componentsSeparatedByString:@"+"]];
        NSLog(@"获取图片数组成功");
    }];//注入JS方法
    
    //添加图片可点击JS
    [webView evaluateJavaScript:jsClickImage completionHandler:nil];
    [webView evaluateJavaScript:@"registerImageClickAction()" completionHandler:nil];
}

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation 
{
    //加载完成注入js
    [self getImagesFromJSAndClickImgEvent:webView];
}

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 
{
    //捕获图片链接
    NSURL *URL = navigationAction.request.URL;
    NSString *str = [NSString stringWithFormat:@"%@",URL];
    if ([str containsString:@"image-preview:"]) {
        NSString *clickedImgStr = [URL.absoluteString substringFromIndex:[@"image-preview:" length]];
        //第三方图片浏览器
//              NSString *userid =@"";//用户id
//              [self showPhotoBrower:_mUrlArray andIndex:count dataArray:@[] isSelf:NO authId:userid];
        decisionHandler(WKNavigationActionPolicyCancel); // 必须实现 不加载
    }else {
        decisionHandler(WKNavigationActionPolicyAllow);  // 必须实现 加载
    }
}