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

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

作者: 白日一山 | 来源:发表于2016-12-09 10:52 被阅读0次

    最近项目某个模块中要求可以实现对网页中图片的查看,并要求在多张图片的情况下可以实现滑动浏览。
    所以,问题的集中点就是如何获取所有的图片地址及添加图片的点击事件。不多说,直接上码!

    在网页加载完成时,通过js获取图片和添加点击的识别方式
    - (void)webViewDidFinishLoad:(UIWebView *)webView {
    [IDProgressHUD IDPlaceViewHideDirect:self.view];

    //这里是js,主要目的实现对url的获取
    static  NSString * const jsGetImages =
    @"function getImages(){\
    var objs = document.getElementsByTagName(\"img\");\
    var imgScr = '';\
    for(var i=0;i<objs.length;i++){\
    imgScr = imgScr + objs[i].src + '+';\
    };\
    return imgScr;\
    };";
    
    [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
    NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
    mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
    if (mUrlArray.count >= 2) {
        [mUrlArray removeLastObject];
    }
    //urlResurlt 就是获取到得所有图片的url的拼接;mUrlArray就是所有Url的数组
    
    //添加图片可点击js
    [mWebView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\
     var imgs=document.getElementsByTagName('img');\
     var length=imgs.length;\
     for(var i=0;i<length;i++){\
     img=imgs[i];\
     img.onclick=function(){\
     window.location.href='image-preview:'+this.src}\
     }\
     }"];
    [mWebView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];
    }
    
    //在这个方法中捕获到图片的点击事件和被点击图片的url
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    //预览图片
    if ([request.URL.scheme isEqualToString:@"image-preview"]) {
        NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
        path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
        //path 就是被点击图片的url
        return NO;
    }
    return YES;
    }
    

    后记:js挺好玩,我相信以后还会去多接触它。
    全文转自:http://blog.csdn.net/u014544904/article/details/50479083

    相关文章

      网友评论

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

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