iOS 获取Web图片并添加点击事件

本文介绍如何从H5网页上获取到该网页上的图片及给图片添加上点击事件,通过Demo进行讲解,代码如下:

#import "ViewController.h"

@interface ViewController ()<UIWebViewDelegate>
@property (strong, nonatomic) NSMutableArray *mUrlArray;//图片URL数组
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self loadWebView];
}
//加载WebView
-(void)loadWebView{
    NSString *htmURL = @"http://finance.ifeng.com/a/20170703/15505126_0.shtml";//注意到plist中允许加载http请求
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    webView.delegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:htmURL]]];
    [self.view addSubview:webView];
}

//在这个方法中捕获到图片的点击事件和被点击图片的url
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    //预览图片
    if ([request.URL.scheme isEqualToString:@"image-preview"]) {
        NSString* clickedImgURL = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
        clickedImgURL = [clickedImgURL stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];//path 就是被点击图片的url
        NSInteger count = 0;//计数变量
        for (NSString *imgURL in _mUrlArray) {
            //比对数组中的图片URL与选定图片的URL
            if ([imgURL isEqualToString:clickedImgURL]) {
                //第三方图片浏览器
//              NSString *userid =@"1726";//用户id
//              [self showPhotoBrower:_mUrlArray andIndex:count dataArray:@[] isSelf:NO authId:userid];
                return NO;
            }
            count ++;
        }
        return NO;
    }
    return YES;
}
//webView结束加载
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    [self getImagesFromJSAndClickImgEvent:webView];
}
#pragma mark -- wsx 收集JS页面传来的图片及添加图片点击事件
-(void)getImagesFromJSAndClickImgEvent:(UIWebView *)webView{
    //这里是JS,主要目的: - 获取H5图片的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方法
    //urlResurlt - 获取到H5页面上所有图片的url的拼接
    NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
    //mUrlArray就是所有图片URL的数组
    _mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
    if (_mUrlArray.count >= 2) {
        [_mUrlArray removeLastObject];
    }
    
    //添加图片可点击JS
    [webView 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}\
     }\
     }"];
    [webView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];
}

@end
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,666评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 卖玩具的小摊前 一个可爱的小女孩 指着漂亮的风车 大声说,妈妈我要这个 妈妈买给了她 另一个同样可爱的小女孩 也说...
    文学山主编山下阅读 184评论 0 0
  • 假设有一个机器将沙子一粒粒落在一个大平台上,刚刚开始的时候,沙子可能落得到处都是。随着沙子的堆积,以沙子落点为中心...
    止一量化养家阅读 422评论 0 2
  • 首先说一下,我所用的操作系统是windows10因为百度音乐盒突然不可以用了,就搜索了一系列解决方案。经过尝试之后...
    jianshuttl阅读 1,880评论 0 0