项目中有这样一种需求，给html5网页中图片添加点击事件，并且弹出弹出点击的对应的图片，并且可以保持图片到本地

应对这样的需求你可能会想到很多方法来实现。

  1. 1. 最简单的方法就是在html5中添加图片的onClick方法，并把图片的src和index传过来。这种方法虽然能够很好的解决这个问题，但是还需要前端代码的支持
  2. 2.使用WebviewJavascripBridge添加objc和js交互的方法，通过调用方法来实现效果，缺点是需要用到第三方,并且同样也需要前端代码的支持
  3. 3.第三种也就是今天这里要着重介绍的方法：objc中动态注入JavaScript代码，动态给img标签添加onClick事件。话不多说，直接上代码(最后有demo下载地址)

html代码

  1. <!DOCTYPE html>
  2. <html>
  4. 	<head>
  5. 		<meta charset="utf-8" />
  6. 		<title>测试demo</title>
  7. 		<style type="text/css">
  8. 			img {
  9. 				width: 100%;
  10. 			}
  11. 		</style>
  12. 	</head>
  14. 	<body>
  15. 		<p>内容测试我是详情内容1</p>
  16. 		<img src="http://img1.cyzone.cn/uploadfile/2017/0602/20170602094901601.jpg">
  17. 		<p>内容测试我是详情内容2</p>
  18. 		<p>内容测试我是详情内容3</p>
  19. 		<img src="http://img1.cyzone.cn/uploadfile/2017/0602/20170602094902133.jpg">
  20. 		<p>内容测试我是详情内容4</p>
  21. 		<img src="http://img1.cyzone.cn/uploadfile/2017/0602/20170602094902734.jpg">
  22. 		<p>内容测试我是详情内容5</p>
  24. 	</body>
  26. </html>

objc代码

  1. //
  2. //  ViewController.m
  3. //  JSInsertDemo
  4. //
  5. //  Created by Tiny on 2017/6/8.
  6. //  Copyright © 2017年 LOVEGO. All rights reserved.
  7. //
  9. #import "ViewController.h"
  11. @interface ViewController ()<UIWebViewDelegate>
  13. @property (nonatomic,strong) UIWebView *webView;
  14. @property (nonatomic,strong) NSMutableArray *imgsArr;
  16. @end
  18. @implementation ViewController
  20. - (void)viewDidLoad {
  21.     [super viewDidLoad];
  22.     // Do any additional setup after loading the view, typically from a nib.
  23.     self.imgsArr = [NSMutableArray array];
  25. //    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://192.168.20.14:8020/JsToObjc/index.html"]]
  26.     //加载本地html
  27.     NSString *path = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
  28.     NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
  29.     [self.webView loadRequest:request];
  30. }
  32. -(UIWebView *)webView{
  33.     if (_webView == nil) {
  34.         _webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
  35.         _webView.delegate = self;
  36.         _webView.scrollView.scrollsToTop = NO;
  37.         _webView.backgroundColor = [UIColor whiteColor];
  38.         [self.view addSubview:_webView];
  39.     }
  40.     return _webView;
  41. }
  43. #pragma mark - webViewDelegate
  44. -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
  45.     if([request.URL.scheme isEqualToString:@"image-preview"]){
  46.         //触发点击事件  -- >拿到是第几个标签被点击了
  47.         NSString *clickImg = request.URL.resourceSpecifier;
  48.         //遍历数组，查询查找当前第几个图被点击了
  49.         NSInteger selectIndex = 0;
  50.         for(int i = 0; i< self.imgsArr.count;i++){
  51.             NSString *imgUrl = self.imgsArr[i];
  52.             if ([imgUrl isEqualToString:clickImg]) {
  53.                 selectIndex = i;
  54.                 break;
  55.             }
  56.         }
  57.         //拿到当前选中的index  -- > 使用图片浏览器让图片显示出来
  58.         NSLog(@"当前图片%@ 选中index:%zi",clickImg,selectIndex);
  59.         return NO;
  60.     }
  61.     return YES;
  62. }
  64. -(void)webViewDidFinishLoad:(UIWebView *)webView{
  65.     //加载完成之后开始注入js事件
  66.     [self.webView stringByEvaluatingJavaScriptFromString:@"\
  67.      function imageClickAction(){\
  68.         var imgs=document.getElementsByTagName('img');\
  69.         var length=imgs.length;\
  70.         for(var i=0;i<length;i++){\
  71.             img=imgs[i];\
  72.             img.onclick=function(){\
  73.                 window.location ='image-preview:'+this.src;\
  74.             }\
  75.         }\
  76.      }\
  77.      "];
  78.     //触发方法 给所有的图片添加onClick方法
  79.     [self.webView stringByEvaluatingJavaScriptFromString:@"imageClickAction();"];
  81.     //拿到最终的html代码
  82. //    NSString *HTMLSource = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('script')[0].innerHTML"];
  83.     //调用html代码
  84.     [self.webView stringByEvaluatingJavaScriptFromString:@"sendMsg('我是objc传入的值');"];
  86.     //拿到所有img标签对应的图片
  87.     [self handleImgLabel];
  88. }
  90. -(void)handleImgLabel{
  91.     //要拿到所有img标签对应的图片的src
  92.     //1.拿到img标签的个数
  93.     NSUInteger length = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('img').length"] integerValue];
  94.     //2.遍历标签，拿到标签中src的内容
  95.     for (int i =0 ; i < length; i++) {
  96.         NSString *jsStr = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%zi].src",i];
  97.         NSString *img = [self.webView stringByEvaluatingJavaScriptFromString:jsStr];
  98.         //3.将标签中src内容存入数组
  99.         [self.imgsArr addObject:img];
  100.     }
  101. }
  102. @end

demo下载地址：https://github.com/qqcc1388/ObjcInsetJavaScriptDemo

转载请标注来源https://www.cnblogs.com/qqcc1388/p/6962895.html

iOS中动态注入JavaScript方法。动态给html标签添加事件的更多相关文章

  1. iOS中产生随机数的方法

    利用arc4random_uniform()产生随机数 Objective-C 中有个arc4random()函数用来生成随机数且不需要种子,但是这个函数生成的随机数范围比较大,需要用取模的算法对随机 ...

  2. ios中NSUserDefaults的使用方法

    ios中NSUserDefaults的使用方法 NSUserDefaults类提供了一个与默认系统进行交互的编程接口.NSUserDefaults对象是用来保存.恢复应用程序相关的偏好设置,配置数据等 ...

  3. WebView动态注入JavaScript脚本

    Demo地址:https://gitee.com/chenyangqi/YouMeDai 背景介绍 在Android与JavaScript交互一文中学习了原生和JS交互,但是如果我们想和别人开发好的w ...

  4. iOS中数组遍历的方法及比较

    数组遍历是编码中很常见的一种需求,我们来扒一拔iOS里面都有什么样的方法来实现,有什么特点. 因为ios是兼容C语言的,所以c语言里面的最最常见的for循环遍历是没有问题的. 本文中用的数组是获取的系 ...

  5. iOS中数组遍历的方法及比較

    数组遍历是编码中非经常见的一种需求.我们来扒一拔iOS里面都有什么样的方法来实现,有什么特点. 由于iOS是兼容C语言的.所以C语言里面的最最常见的for循环遍历是没有问题的. 本文中用的数组是获取的 ...

  6. 关于时间排序在ios中失效的处理方法

    上个月公司做项目的时候在列表排序的时候产品加了一个需求,通过点击量,发布时间,评论量进行筛选的一个需求. 一开始在电脑上测试基本没问题,然后我也就放下了这个按耐不住的小心脏,然后在完成所有模块后 sh ...

  7. datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)

    一.动态定义列头 在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对 我自定义了Mock数据,用于前端自己交互. 其中,rowdata用于存放传回的数据,co ...

  8. iOS中的静态库与动态库，区别、制作和使用

    如果我们有些功能要给别人用,但是又不想公开代码实现,比如高德地图.第三方登录分享等等,这时候我们就要打包成库了.库分静态库和动态库两种: 静态库:以.a 和 .framework为文件后缀名.动态库: ...

  9. iOS 中的静态库与动态库，区别、制作和使用

    如果我们有些功能要给别人用,但是又不想公开代码实现,比如高德地图.第三方登录分享等等,这时候我们就要打包成库了.库分静态库和动态库两种: 静态库:以.a 和 .framework为文件后缀名.动态库: ...

随机推荐

  1. js 数组方法总结

    Array数组: length属性 可通过array.length增加或者减少数组的长度,如;array.length=4(数组长3,第四位为undefined),也可单纯获得长度.array[arr ...

  2. onmouseover事件

    根据教学视频写了个onmouseover事件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  3. Jsoup抓取、解析网页和poi存取excel综合案例——采集网站的联系人信息

    需求:采集网站中每一页的联系人信息 一.创建maven工程,添加jsoup和poi的依赖包 <!-- https://mvnrepository.com/artifact/org.apache. ...

  4. AJAX做增删改查详细！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. linux 基础（1）

    第一章 Linux 基础知识(一) 一.硬件介绍: 由一条总线把CPU.内存和I/O设备串联起来并与其他设备进行通信.CPU负责运算,内存用于储存临时变量,硬盘用于储存数据.1.1处理器CPU 从内存 ...

  6. 基于R树索引的点面关系判断以及效率优化统计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在之前的博客中,我分别介绍了基于网格的空间索引(http:// ...

  7. redis3.05安装

    #yum -y install gcc #cd /usr/local/src #tar -zxvf redis-3.0.5.tar.gz #cd redis-3.05/ #make PREFIX=/u ...

  8. string___assign

    #include <iostream> #include <iterator> #include <string> int main() { std::string ...

  9. 堆和栈（java内存）

    栈内存: 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间,当超过变量的作用域后,java会自动释放掉为 ...

  10. PHP实现二维数组排序(按照数组中的某个字段)

    亲测可行