[原创]WKWebview点击图片查看大图
2016-01-04 16:10
429 查看
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了
其实很简单,给WKWebview写个类别,添加两个方法就行了,然后在WKWebview的两个协议中调用下这两个方法就行了
首先声明个数组来接收图片数组,可是有个问题,那就是类别是声明不了属性的,那怎么办呢?我们可以通过runtime来设置属性,runtime非常有用,我们以后的篇章会说到。
static char imgUrlArrayKey;
- (void)setMethod:(NSArray *)imgUrlArray
{
objc_setAssociatedObject(self, &imgUrlArrayKey, imgUrlArray, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (NSArray *)getImgUrlArray
{
returnobjc_getAssociatedObject(self, &imgUrlArrayKey);
}
这样就声明了个数组
方法一:通过js获取网页图片数组
/*
*通过js获取htlm中图片url
*/
-(NSArray *)getImageUrlByJS:(WKWebView *)wkWebView
{
//查看大图代码
//js方法遍历图片添加点击事件返回图片个数
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgUrlStr='';\
for(var i=0;i<objs.length;i++){\
if(i==0){\
if(objs[i].alt==''){\
imgUrlStr=objs[i].src;\
}\
}else{\
if(objs[i].alt==''){\
imgUrlStr+='#'+objs[i].src;\
}\
}\
objs[i].onclick=function(){\
if(this.alt==''){\
document.location=\"myweb:imageClick:\"+this.src;\
}\
};\
};\
return imgUrlStr;\
};";
//用js获取全部图片
[wkWebView evaluateJavaScript:jsGetImages completionHandler:^(id Result, NSError * error) {
NSLog(@"js___Result==%@",Result);
NSLog(@"js___Error -> %@", error);
}];
NSString *js2=@"getImages()";
__block NSArray *array=[NSArray array];
[wkWebView evaluateJavaScript:js2 completionHandler:^(id Result, NSError * error) {
NSLog(@"js2__Result==%@",Result);
NSLog(@"js2__Error -> %@", error);
NSString *resurlt=[NSString stringWithFormat:@"%@",Result];
if([resurlt hasPrefix:@"#"])
{
resurlt=[resurlt substringFromIndex:1];
}
NSLog(@"result===%@",resurlt);
array=[resurlt componentsSeparatedByString:@"#"];
NSLog(@"array====%@",array);
[wkWebView setMethod:array];
}];
return array;
}
方法二:显示大图
//显示大图
-(BOOL)showBigImage:(NSURLRequest *)request
{
//将url转换为string
NSString *requestString = [[request URL] absoluteString];
//hasPrefix 判断创建的字符串内容是否以pic:字符开始
if ([requestString hasPrefix:@"myweb:imageClick:"])
{
NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
NSLog(@"image url------%@", imageUrl);
NSArray *imgUrlArr=[self getImgUrlArray];
NSInteger index=0;
for (NSInteger i=0; i<[imgUrlArr count]; i++) {
if([imageUrl isEqualToString:imgUrlArr[i]])
{
index=i;
break;
}
}
[WFImageUtilshowImgWithImageURLArray:[NSMutableArrayarrayWithArray:imgUrlArr] index:index myDelegate:nil];
return NO;
}
returnYES;
}
在WKWebview协议中调用上面两个类别的方法
// 类似 UIWebView 的 -webViewDidFinishLoad:
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
//通过js获取htlm中图片url
[webView getImageUrlByJS:webView];
}
// 类似 UIWebView 的 -webView: shouldStartLoadWithRequest: navigationType:
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
[webView showBigImage:navigationAction.request];
decisionHandler(WKNavigationActionPolicyAllow);
}
其实很简单,给WKWebview写个类别,添加两个方法就行了,然后在WKWebview的两个协议中调用下这两个方法就行了
首先声明个数组来接收图片数组,可是有个问题,那就是类别是声明不了属性的,那怎么办呢?我们可以通过runtime来设置属性,runtime非常有用,我们以后的篇章会说到。
static char imgUrlArrayKey;
- (void)setMethod:(NSArray *)imgUrlArray
{
objc_setAssociatedObject(self, &imgUrlArrayKey, imgUrlArray, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (NSArray *)getImgUrlArray
{
returnobjc_getAssociatedObject(self, &imgUrlArrayKey);
}
这样就声明了个数组
方法一:通过js获取网页图片数组
/*
*通过js获取htlm中图片url
*/
-(NSArray *)getImageUrlByJS:(WKWebView *)wkWebView
{
//查看大图代码
//js方法遍历图片添加点击事件返回图片个数
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgUrlStr='';\
for(var i=0;i<objs.length;i++){\
if(i==0){\
if(objs[i].alt==''){\
imgUrlStr=objs[i].src;\
}\
}else{\
if(objs[i].alt==''){\
imgUrlStr+='#'+objs[i].src;\
}\
}\
objs[i].onclick=function(){\
if(this.alt==''){\
document.location=\"myweb:imageClick:\"+this.src;\
}\
};\
};\
return imgUrlStr;\
};";
//用js获取全部图片
[wkWebView evaluateJavaScript:jsGetImages completionHandler:^(id Result, NSError * error) {
NSLog(@"js___Result==%@",Result);
NSLog(@"js___Error -> %@", error);
}];
NSString *js2=@"getImages()";
__block NSArray *array=[NSArray array];
[wkWebView evaluateJavaScript:js2 completionHandler:^(id Result, NSError * error) {
NSLog(@"js2__Result==%@",Result);
NSLog(@"js2__Error -> %@", error);
NSString *resurlt=[NSString stringWithFormat:@"%@",Result];
if([resurlt hasPrefix:@"#"])
{
resurlt=[resurlt substringFromIndex:1];
}
NSLog(@"result===%@",resurlt);
array=[resurlt componentsSeparatedByString:@"#"];
NSLog(@"array====%@",array);
[wkWebView setMethod:array];
}];
return array;
}
方法二:显示大图
//显示大图
-(BOOL)showBigImage:(NSURLRequest *)request
{
//将url转换为string
NSString *requestString = [[request URL] absoluteString];
//hasPrefix 判断创建的字符串内容是否以pic:字符开始
if ([requestString hasPrefix:@"myweb:imageClick:"])
{
NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
NSLog(@"image url------%@", imageUrl);
NSArray *imgUrlArr=[self getImgUrlArray];
NSInteger index=0;
for (NSInteger i=0; i<[imgUrlArr count]; i++) {
if([imageUrl isEqualToString:imgUrlArr[i]])
{
index=i;
break;
}
}
[WFImageUtilshowImgWithImageURLArray:[NSMutableArrayarrayWithArray:imgUrlArr] index:index myDelegate:nil];
return NO;
}
returnYES;
}
在WKWebview协议中调用上面两个类别的方法
// 类似 UIWebView 的 -webViewDidFinishLoad:
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
//通过js获取htlm中图片url
[webView getImageUrlByJS:webView];
}
// 类似 UIWebView 的 -webView: shouldStartLoadWithRequest: navigationType:
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
[webView showBigImage:navigationAction.request];
decisionHandler(WKNavigationActionPolicyAllow);
}
相关文章推荐
- Android练兵--Material加载进度条
- Objective-C学习篇第十二弹:键值观察KVO详解
- ios系统获取ssid
- [Android实例] 带clean按钮的输入框
- iOS crash log 解析 symbol address = stack address - slide 运行时获取slide的api 利用dwarfdump从dsym文件中得到symbol
- Cocos在windows7下的配置与apk打包
- iOS之富文本
- xcode7--iOS开发---将app打包发布至app store
- Activity的启动模式(android:launchMode)
- ndk-stack的使用
- 关于android设计理念
- iOS 银联SDK更新后遇到的问题
- Unity-Animator深入系列---状态机面板深入
- iOS每日一记-----把window暂时的移除到屏幕外面 pop到指定的Viewcontroller
- iOS tableView 在最后插入Cell
- Gradle android自动填写SVN号,并发布(拷贝)到指定目录
- iOS 证书调试的理解(Personal)
- Android开发秘籍学习笔记(十二)
- ios 上拉载入下拉刷新Dome
- Swift Tips笔记