大家都知道,WKWebview是沒有查看大圖的屬性或者方法的,所以只能通過js與之交互來實現這一功能,原理:通過js獲取頁面的圖片,把它存放到數組,給圖片添加點擊事件,通過index顯示大圖就行了其實很簡單,給WKWebview寫個類別,添加兩個方法就行了,然後在WKWebview的兩個協議中調用下...
大家都知道,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);
}