iOS 开发实现WKWebView点击图片后,浏览图片。(交互处

2018-06-19  本文已影响0人  噜噜噜噜噜噜噜噜

《使用markdown编辑》
我们都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了其实很简单,给WKWebview写个类别,添加两个方法就行了,然后在WKWebview的两个协议中调用下这两个方法就行了。

第一步:

首先声明个数组来接收图片数组,可是有个问题,那就是类别是声明不了属性的,那怎么办呢?我们可以通过runtime来设置属性,runtime非常有用,我们以后的篇章会说到。
` staticcharimgUrlArrayKey;

第二步:

方法一:通过js获取网页图片数组
/*
通过js获取htlm中图片url
/
` -(NSArray
)getImageUrlByJS:(WKWebView
)wkWebView {
//查看大图代码
//js方法遍历图片添加点击事件返回图片个数
staticNSString*constjsGetImages =
@"function getImages(){
var objs = document.getElementsByTagName("img");
var imgUrlStr='';
for(var i=0;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获取全部图片
[wkWebViewevaluateJavaScript:jsGetImagescompletionHandler:^(idResult,NSError* error) { NSLog(@"js___Result==%@",Result); NSLog(@"js___Error -> %@", error); }]; NSString *js2=@"getImages()"; __blockNSArray*array=[NSArrayarray]; [wkWebViewevaluateJavaScript:js2completionHandler:^(idResult,NSError* error) { NSLog(@"js2__Result==%@",Result); NSLog(@"js2__Error -> %@", error); NSString*resurlt=[NSStringstringWithFormat:@"%@",Result]; if([resurlthasPrefix:@"#"]) { resurlt=[resurltsubstringFromIndex:1]; } NSLog(@"result===%@",resurlt); array=[resurlt componentsSeparatedByString:@"#"]; NSLog(@"array====%@",array); [wkWebViewsetMethod:array]; }]; returnarray; }

第三步:

在加载页面导入头文件,#import "WKWebView+HtmlImages.h";#import "SDPhotoBrowser.h"// 图片浏览器;然后实现wkWebView的代理方法。
// 页面加载完成之后调用
` - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
//通过js获取htlm中图片url
[self.wkWebView getImageUrlByJS:webView];

} `

第四步:

` #pragma mark - WKNavigationDelegate

上一篇 下一篇

猜你喜欢

热点阅读