wkwebview 预览文件_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

查看github

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

//如果需要进度条，请复制github中的监听方法即可。

/**

web页面中的图片链接数组

*/

@property (nonatomic, strong) NSMutableArray *imgSrcArray;

/**

获取webView的标题

*/

@property (nonatomic, copy) NSString *webViewtitle;

/**

注入H5页面的交互模型

*/

@property (nonatomic, strong) NSArray *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

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

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

imgScr = imgScr + objs[i].src + '+';\

};\

return imgScr;\

};function registerImageClickAction(){\

var imgs=document.getElementsByTagName('img');\

var length=imgs.length;\

for(var i=0;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]];

}