WKWebView支持H5图片预览、保存、与js交互详解

(此文较旧，具体请参看github上的使用范例)
先看一下几点再决定是否读本文：

• 需要一个优雅、漂亮的像YYKitDemo中的图片浏览器。
• 需要使用WKWebView与javaScript交互。
• WKWebView需要支持图片预览，并可点击图片保存等功能。
• 需要获取WKWebView加载的网页的页面元素。
• 需要获取WKWebView中的图片链接数组。
• 需要使用WKWebView的cookie做一些操作

//如果你的需求满足👆的任何一个，请读下去
if (yourNeeds != nil)  {
        NSLog(@"请继续读");
} else {
        return;
}

SDWebView组件 是针对WKWebView进行的深度封装、支持H5图片预览和H5交互、调用js方法等。
SDPhotoBrowserd组件 是一个图片浏览器，创建简单易用，可以复制demo中的代码。
demo是使用SDWebView加载的图片页面，然后使用SDPhotoBrowserd进行图片预览，磨砂的背景比普通黑色耐看！需要用到WKWebView中图片预览的这个demo就在合适不过了！

效果如下图（demo下载后需要pod install）：

SDPhotoBrowserd.gif
下载demo给个星星呗

更重要的是 SDWebView提供了更好用的属性

//如果需要进度条，请复制github中的监听方法即可。
/**
 web页面中的图片链接数组
 */
@property (nonatomic, strong) NSMutableArray *imgSrcArray;
/**
 获取webView的标题
 */
@property (nonatomic, copy) NSString *webViewtitle;
/**
 注入H5页面的交互模型
 */
@property (nonatomic, strong) NSArray<NSString *> *jsHandlers;
//与H5交互需要注入一个字符串对象，可以是一个或多个。创建一个字符串对象如NSString *control = @"control";
//NSArray *handlers  = @[control];
//jsHandlers = handlers;

/**
 *  调用JS方法（可处理返回值）
 *
 *  @param jsMethod JS方法名称
 *  @param handler  回调block
 */
- (void)callJavaScript:(nonnull NSString *)jsMethodName handler:(nullable void(^)(__nullable id response))handler;

//如果前端人员不知道OC调用js 的方法怎么写 可参考如下代码 😝
function configer() {
    return {'c':"100"}
}
在callJS方法中直接让前端人员返回一个json 或者 其他返回值 OC即可在handler这个blcok 中获取 这个返回值

交互原理可参看demo中的代码，本demo中包含使用WKWebView注入js方法获取webview中的图片链接，并给图片添加点击事件，并调用js方法，实现图片的预览。

具体初始化方式如下：

SDWebView *webView = [[SDWebView alloc] initWithFrame:self.view.bounds];
//加载本地html资源
[webView loadLocalHTMLWithFileName:@"source"];
[self.view addSubview:webView];

注入webView，获取图片数组的javaScript方法

@"function getImages(){
        var objs = document.getElementsByTagName("img");
        var imgScr = '';
        for(var i=0;i<objs.length;i++){
        imgScr = imgScr + objs[i].src + '+';
        };
        return imgScr;
};

给webView页面图片添加点击事件的javaScript方法

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
        }
    }
}

注入js方法原理

WKUserScript 是WKWebView实现注入的核心对象，SDWebView的初始化方法如下：

- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration {
//创建configer  wkwebView的具有的特殊功能基本全是这个configer的属性
    WKWebViewConfiguration *configer = [[WKWebViewConfiguration alloc] init];
//用于和H5交互的容器
    configer.userContentController = [[WKUserContentController alloc] init];
//偏好设置
    configer.preferences = [[WKPreferences alloc] init];
    configer.preferences.javaScriptEnabled = YES;
    configer.preferences.javaScriptCanOpenWindowsAutomatically = NO;
//允许视频在页面内播放（默认是NO即webView播放视频时会弹出一个全屏的播放器）
    configer.allowsInlineMediaPlayback = YES;
//注入js方法的对象
    [configer.userContentController addUserScript:self.userScript];
    self = [super initWithFrame:frame configuration:configer];
    [self setDefaultValue];
    return self;
}
- (void)setDefaultValue {
    _displayHTML = NO;
    _displayCookies = NO;
    _displayURL = YES;
    self.UIDelegate = self;
    self.navigationDelegate = self;
    self.scrollView.showsVerticalScrollIndicator = NO;
}
- (WKUserScript *)userScript {
    if (!_userScript) {
        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;\
        };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}\
        }\
        }";
        _userScript = [[WKUserScript alloc] initWithSource:jsGetImages injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    }
    return _userScript;
}

图片浏览器SDPhotoBrowserd，支持网络图片，初始化如下：

    SDPhotoBrowserd *browser = [[SDPhotoBrowserd alloc] init];
    browser.imageCount = self.imgSrcArray.count; // 图片总数
    browser.currentImageIndex = currentIndex;
    browser.sourceImagesContainerView = self.superview; // 原图的父控件
    browser.delegate = self;
    [browser show];

//有两个代理方法 是用来返回缩略图和原图的
- (UIImage *)photoBrowser:(SDPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index {
    //原有的缩略图

 //  return image;
}


// 返回高质量图片的url
- (NSURL *)photoBrowser:(SDPhotoBrowserd *)browser highQualityImageURLForIndex:(NSInteger)index {
    
    return [NSURL URLWithString:self.imgSrcArray[index]];
    
}