SDWebView组件 是针对WKWebView进行的深度封装、支持和H5交互、包括调用js方法等。挺全面的,有不当之处,请多指教,微信:xue-zhi-yin-you-ni。 PhotoBrowser组件 是早些时候我从耀源项目YYKit中抽离出来的图片浏览器,并做了类的重命名,防止和项目中继承YYKit的同学发生文件冲突,比我写的好用,就干脆移植过来,创建简单易用,可以复制demo中的代码。 demo是使用SDWebView加载的图片页面,然后使用PhotoBrowser组件进行图片预览,需要用到WKWebView中图片预览的这个demo就在合适不过了!
一.支持H5页面图片预览 二.支持H5调用OC OC调用H5 三.更多!!!
//给webView添加监听title和进度条
[self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil];
[self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
//kvo监听进度条
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
if ([object isKindOfClass:[SDWebView class]]) {
if ([keyPath isEqualToString:@"estimatedProgress"]) {
CGFloat newprogress = [[change objectForKey:NSKeyValueChangeNewKey] doubleValue];
if (newprogress == 1) {
self.webView.progressView.hidden = YES;
[self.webView.progressView setProgress:0 animated:NO];
}else {
self.webView.progressView.hidden = NO;
[self.webView.progressView setProgress:newprogress animated:YES];
}
}
if ([keyPath isEqualToString:@"title"]) {
if (self.webView.title.length > 10) {
self.navigationItem.title = [self.webView.title substringToIndex:14];
} else {
self.navigationItem.title = self.webView.title;
}
}
} else {
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
}
}
//移除监听
[self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
[self.webView removeObserver:self forKeyPath:@"title"];
//js调OC时,需要让前端人员写如下js代码
//👇 AppModel是我们所注入的对象 也就是SDWebView的jsHandlers
window.webkit.messageHandlers.AppModel.postMessage({body: response});
//对象可以注入多个,所以jsHandlers是个数组 如下代码:注入三个对象到页面中
self.webView.jsHandlers = @[TOLOGIN,TOPAY,TOYATI];
//如果注入了对象 要调用如下方法,注销handle 不然会creash
[self.webView removejsHandlers];
//OC调用js时,可以调用如下方法:
- (void)callJS:(nonnull NSString *)jsMethodName;
//可能使用的属性及方法如下:
/**
需要加载的urlStr
*/
@property (nonatomic, copy) NSString *URLString;
/**
web页面中的图片链接数组
*/
@property (nonatomic, strong) NSMutableArray *imgSrcArray;
/**
进度条
*/
@property (strong, nonatomic) UIProgressView *progressView;
/**
webView的标题、如果navigationItemTitle需要和webView保持一致、直接getter方法即可
*/
@property (nonatomic, copy) NSString *webViewtitle;
/**
注入H5页面的交互模型
*/
@property (nonatomic, strong) NSArray<NSString *> *jsHandlers;
/**
获取交互的参数代理
*/
@property (nonatomic, weak) id<SDWebViewDelegate> delegate;
/**
根据URL初始化
@param urlString URLString
@return WebviewVc实例
*/
- (instancetype)initWithURLString:(NSString *)urlString;
/**
* 加载本地HTML页面
*
* @param htmlName html页面文件名称
*/
- (void)loadLocalHTMLWithFileName:(nonnull NSString *)htmlName;
/**
移除jsHandler
*/
- (void)removejsHandlers;
/**
清除所有cookie
*/
- (void)removeCookies;
/**
清除指定域名中的cookie
@param cookieName 域名
*/
- (void)removeCookieWithHostName:(NSString *)hostName;
/**
* 调用JS方法(无返回值)
*
* @param jsMethod JS方法名称
*/
- (void)callJS:(nonnull NSString *)jsMethodName;
/**
* 调用JS方法(可处理返回值)
*
* @param jsMethod JS方法名称
* @param handler 回调block
*/
- (void)callJavaScript:(nonnull NSString *)jsMethodName handler:(nullable void(^)(__nullable id response))handler;
//如果前端人员不知道OC调用js 的方法怎么写 可参考如下代码 ↓
function configer() {
reture {'c':"100"}
}
在callJS方法中直接让前端人员返回一个json 或者 其他返回值 OC即可在handler这个blcok 中获取 这个返回值
Support Cocopods: pod 'SDWebView'
SDWebView中注入的js只对部分H5页面有效,如果当前的H5页面中的图片是在iframe中引用的另外一个URL中的图片,那么SDWebView是不支持的,请自行参考交互代码和前端人员指定交互方式,特此说明。