美文网首页webView与APP
iOS WebView 如何通过js获取网页中所有图片并加入点击

iOS WebView 如何通过js获取网页中所有图片并加入点击

作者: X_code_ZH | 来源:发表于2018-03-21 16:54 被阅读0次

    最近项目某个模块中要求可以实现对网页中图片的查看,并要求在多张图片的情况下可以实现滑动浏览。

    所以,问题的集中点就是如何获取所有的图片地址及添加图片的点击事件。不多说,直接上码!

    在网页加载完成时,通过js获取图片和添加点击的识别方式

    - (void)webViewDidFinishLoad:(UIWebView*)webView {

        [IDProgressHUDIDPlaceViewHideDirect:self.view];

        //这里是js,主要目的实现对url的获取

    staticNSString*constjsGetImages =

        @"function getImages(){\

        var objs = document.getElementsByTagName(\"img\");\

        var imgScr = '';\

        for(var i=0;i

        imgScr = imgScr + objs[i].src + '+';\

        };\

        return imgScr;\

    };";

        [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法

        NSString *urlResurlt = [webViewstringByEvaluatingJavaScriptFromString:@"getImages()"];

        mUrlArray = [NSMutableArrayarrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];

    if(mUrlArray.count>=2) {

            [mUrlArrayremoveLastObject];

        }

        //urlResurlt 就是获取到得所有图片的url的拼接;mUrlArray就是所有Url的数组

        //添加图片可点击js

        [mWebViewstringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\

         var imgs=document.getElementsByTagName('img');\

         var length=imgs.length;\

         for(var i=0;i

         img=imgs[i];\

         img.onclick=function(){\

         window.location.href='image-preview:'+this.src}\

         }\

    }"];

        [mWebViewstringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];

    }

    //在这个方法中捕获到图片的点击事件和被点击图片的url

    - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {

        //预览图片

    if([request.URL.schemeisEqualToString:@"image-preview"]) {

    NSString* path = [request.URL.absoluteStringsubstringFromIndex:[@"image-preview:"length]];

            path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

    //path 就是被点击图片的url

    returnNO;

        }

        return YES;

    }

    后记:js挺好玩,我相信以后还会去多接触它

    相关文章

      网友评论

        本文标题:iOS WebView 如何通过js获取网页中所有图片并加入点击

        本文链接:https://www.haomeiwen.com/subject/bjngqftx.html