(此文较旧，具体请参看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
查看github
更重要的是 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]];
}
