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

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

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

html代码

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>测试demo</title>
<style type="text/css">
img {
width: 100%;
}
</style>
</head> <body>
<p>内容测试我是详情内容1</p>
<img src="http://img1.cyzone.cn/uploadfile/2017/0602/20170602094901601.jpg">
<p>内容测试我是详情内容2</p>
<p>内容测试我是详情内容3</p>
<img src="http://img1.cyzone.cn/uploadfile/2017/0602/20170602094902133.jpg">
<p>内容测试我是详情内容4</p>
<img src="http://img1.cyzone.cn/uploadfile/2017/0602/20170602094902734.jpg">
<p>内容测试我是详情内容5</p> </body> </html>

objc代码

//
// ViewController.m
// JSInsertDemo
//
// Created by Tiny on 2017/6/8.
// Copyright © 2017年 LOVEGO. All rights reserved.
// #import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> @property (nonatomic,strong) UIWebView *webView;
@property (nonatomic,strong) NSMutableArray *imgsArr; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.imgsArr = [NSMutableArray array]; // NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://192.168.20.14:8020/JsToObjc/index.html"]]
//加载本地html
NSString *path = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
[self.webView loadRequest:request];
} -(UIWebView *)webView{
if (_webView == nil) {
_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
_webView.delegate = self;
_webView.scrollView.scrollsToTop = NO;
_webView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_webView];
}
return _webView;
} #pragma mark - webViewDelegate
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
if([request.URL.scheme isEqualToString:@"image-preview"]){
//触发点击事件 -- >拿到是第几个标签被点击了
NSString *clickImg = request.URL.resourceSpecifier;
//遍历数组,查询查找当前第几个图被点击了
NSInteger selectIndex = 0;
for(int i = 0; i< self.imgsArr.count;i++){
NSString *imgUrl = self.imgsArr[i];
if ([imgUrl isEqualToString:clickImg]) {
selectIndex = i;
break;
}
}
//拿到当前选中的index -- > 使用图片浏览器让图片显示出来
NSLog(@"当前图片%@ 选中index:%zi",clickImg,selectIndex);
return NO;
}
return YES;
} -(void)webViewDidFinishLoad:(UIWebView *)webView{
//加载完成之后开始注入js事件
[self.webView stringByEvaluatingJavaScriptFromString:@"\
function imageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location ='image-preview:'+this.src;\
}\
}\
}\
"];
//触发方法 给所有的图片添加onClick方法
[self.webView stringByEvaluatingJavaScriptFromString:@"imageClickAction();"]; //拿到最终的html代码
// NSString *HTMLSource = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('script')[0].innerHTML"];
//调用html代码
[self.webView stringByEvaluatingJavaScriptFromString:@"sendMsg('我是objc传入的值');"]; //拿到所有img标签对应的图片
[self handleImgLabel];
} -(void)handleImgLabel{
//要拿到所有img标签对应的图片的src
//1.拿到img标签的个数
NSUInteger length = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('img').length"] integerValue];
//2.遍历标签,拿到标签中src的内容
for (int i =0 ; i < length; i++) {
NSString *jsStr = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%zi].src",i];
NSString *img = [self.webView stringByEvaluatingJavaScriptFromString:jsStr];
//3.将标签中src内容存入数组
[self.imgsArr addObject:img];
}
}
@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. Java的多线程机制系列:(四)不得不提的volatile及指令重排序(happen-before)

    一.不得不提的volatile volatile是个很老的关键字,几乎伴随着JDK的诞生而诞生,我们都知道这个关键字,但又不太清楚什么时候会使用它:我们在JDK及开源框架中随处可见这个关键字,但并发专 ...

  2. WebDriver使用指南(完整篇)

    第1章        入门 1.1   下载selenium2.0的lib包 http://code.google.com/p/selenium/downloads/list 官方UserGuide: ...

  3. [安全]Back_Track_5 vm 版安装和使用

    下载安装 下载使用国内的镜像  http://mirrors.ustc.edu.cn/kali-images/kali-1.0.9/ 我这里是vm9.0 下载之后解压,然后打开vm,然后 文件--&g ...

  4. Modbus tcp 格式说明 通讯机制 附C#测试工具用于学习,测试

    前言: 之前的博客介绍了如何用C#来读写modbus tcp服务器的数据,文章:http://www.cnblogs.com/dathlin/p/7885368.html 当然也有如何创建一个服务器文 ...

  5. Mvc Moq HttpContext

    1: public class MockMvcHttpContext 2: { 3: public Moq.Mock<System.Web.HttpContextBase> Context ...

  6. SharpDevelop 笔记

    1. 下载地址: http://jaist.dl.sourceforge.net/project/sharpdevelop/ 2. 使用 VS2012 去掉编译不通过的 Test ,其它可以运行调试. ...

  7. 快速入门react

    安装react npm install creat-react-app -g这里直接安装react的一个脚手架,里面包含了要用到的许多东西,帮助快速入门react 创建新项目 create-react ...

  8. Centos6.5上安装sonarqube6.7.6

    Centos6.5已经装备好,可以联网 sonarqube6.7.6下载地址:https://www.sonarqube.org/downloads/ 步骤: 安装MySQL5.7 MySQL详细的安 ...

  9. 【原创】IIS7.5优化,支持同时10万个请求

    背景 IIS7.5是微软推出的最新平台IIS,性能也较以前有很大的提升,但是默认的设置配不适合很大的请求.但是我们可以根据实际的需要进行IIS调整,使其性能更佳,支持同时10万个请求. 以下方案,通过 ...

  10. Git--代码托管/协同开发

    Git--代码托管 我爱写代码,公司写,家里写,如果每天来回带一个U盘拷贝着实麻烦,Git有没有类似于云盘似得东西可以进行数据同步呢?答案肯定是有. GitHub,一个基于Git实现的代码托管的平台, ...