zoukankan      html  css  js  c++  java
  • [原创]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);

    }

  • 相关阅读:
    静态和伪静态
    数据库优化
    C#数组的排序(正序逆序)
    C# for和 foreach 的数组遍历 比较
    Python识别璇玑图中诗的数量
    Linux环境下配置matplotlib库使用中文绘图
    manjaro配置记录
    ubuntu环境下测试cache大小并校验
    ubuntu 单机配置hadoop
    cachestat 安装文档
  • 原文地址:https://www.cnblogs.com/lfgtechblog/p/5099265.html
Copyright © 2011-2022 走看看