[原創]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);

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM