(此文較舊，具體請參看github上的使用范例)
先看一下幾點(diǎn)再決定是否讀本文：
- 需要一個(gè)優(yōu)雅、漂亮的像YYKitDemo中的圖片瀏覽器。
- 需要使用WKWebView與javaScript交互。
- WKWebView需要支持圖片預(yù)覽，并可點(diǎn)擊圖片保存等功能。
- 需要獲取WKWebView加載的網(wǎng)頁的頁面元素。
- 需要獲取WKWebView中的圖片鏈接數(shù)組。
- 需要使用WKWebView的cookie做一些操作
//如果你的需求滿足??的任何一個(gè)，請讀下去
if (yourNeeds != nil) {
NSLog(@"請繼續(xù)讀");
} else {
return;
}
SDWebView組件 是針對WKWebView進(jìn)行的深度封裝、支持H5圖片預(yù)覽和H5交互、調(diào)用js方法等。
SDPhotoBrowserd組件 是一個(gè)圖片瀏覽器，創(chuàng)建簡單易用，可以復(fù)制demo中的代碼。
demo是使用SDWebView加載的圖片頁面，然后使用SDPhotoBrowserd進(jìn)行圖片預(yù)覽，磨砂的背景比普通黑色耐看！需要用到WKWebView中圖片預(yù)覽的這個(gè)demo就在合適不過了！
效果如下圖（demo下載后需要pod install）：
SDPhotoBrowserd.gif
查看github
更重要的是 SDWebView提供了更好用的屬性
//如果需要進(jìn)度條，請復(fù)制github中的監(jiān)聽方法即可。
/**
web頁面中的圖片鏈接數(shù)組
*/
@property (nonatomic, strong) NSMutableArray *imgSrcArray;
/**
獲取webView的標(biāo)題
*/
@property (nonatomic, copy) NSString *webViewtitle;
/**
注入H5頁面的交互模型
*/
@property (nonatomic, strong) NSArray<NSString *> *jsHandlers;
//與H5交互需要注入一個(gè)字符串對象，可以是一個(gè)或多個(gè)。創(chuàng)建一個(gè)字符串對象如NSString *control = @"control";
//NSArray *handlers = @[control];
//jsHandlers = handlers;
/**
* 調(diào)用JS方法（可處理返回值）
*
* @param jsMethod JS方法名稱
* @param handler 回調(diào)block
*/
- (void)callJavaScript:(nonnull NSString *)jsMethodName handler:(nullable void(^)(__nullable id response))handler;
//如果前端人員不知道OC調(diào)用js 的方法怎么寫 可參考如下代碼 ??
function configer() {
return {'c':"100"}
}
在callJS方法中直接讓前端人員返回一個(gè)json 或者 其他返回值 OC即可在handler這個(gè)blcok 中獲取 這個(gè)返回值
交互原理可參看demo中的代碼，本demo中包含使用WKWebView注入js方法獲取webview中的圖片鏈接，并給圖片添加點(diǎn)擊事件，并調(diào)用js方法，實(shí)現(xiàn)圖片的預(yù)覽。
具體初始化方式如下：
SDWebView *webView = [[SDWebView alloc] initWithFrame:self.view.bounds];
//加載本地html資源
[webView loadLocalHTMLWithFileName:@"source"];
[self.view addSubview:webView];
注入webView，獲取圖片數(shù)組的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頁面圖片添加點(diǎn)擊事件的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實(shí)現(xiàn)注入的核心對象，SDWebView的初始化方法如下：
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration {
//創(chuàng)建configer wkwebView的具有的特殊功能基本全是這個(gè)configer的屬性
WKWebViewConfiguration *configer = [[WKWebViewConfiguration alloc] init];
//用于和H5交互的容器
configer.userContentController = [[WKUserContentController alloc] init];
//偏好設(shè)置
configer.preferences = [[WKPreferences alloc] init];
configer.preferences.javaScriptEnabled = YES;
configer.preferences.javaScriptCanOpenWindowsAutomatically = NO;
//允許視頻在頁面內(nèi)播放（默認(rèn)是NO即webView播放視頻時(shí)會彈出一個(gè)全屏的播放器）
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，支持網(wǎng)絡(luò)圖片，初始化如下：
SDPhotoBrowserd *browser = [[SDPhotoBrowserd alloc] init];
browser.imageCount = self.imgSrcArray.count; // 圖片總數(shù)
browser.currentImageIndex = currentIndex;
browser.sourceImagesContainerView = self.superview; // 原圖的父控件
browser.delegate = self;
[browser show];
//有兩個(gè)代理方法 是用來返回縮略圖和原圖的
- (UIImage *)photoBrowser:(SDPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index {
//原有的縮略圖
// return image;
}
// 返回高質(zhì)量圖片的url
- (NSURL *)photoBrowser:(SDPhotoBrowserd *)browser highQualityImageURLForIndex:(NSInteger)index {
return [NSURL URLWithString:self.imgSrcArray[index]];
}
