项目中有这样一种需求，给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. Spring + Mybatis 项目实现动态切换数据源

    项目背景:项目开发中数据库使用了读写分离,所有查询语句走从库,除此之外走主库. 最简单的办法其实就是建两个包,把之前数据源那一套配置copy一份,指向另外的包,但是这样扩展很有限,所有采用下面的办法. ...

  2. javaWeb项目（SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat）之二 基础Hibernate框架搭建篇

    我们在搭建完Struts框架之后,从前台想后端传送数据就显得非常简单了.Struts的功能不仅仅是一个拦截器,这只是它的核心功能,此外我们也可以自定义拦截器,和通过注解的方式来更加的简化代码. 接下来 ...

  3. python自动化测试应用-第7篇（WEB测试）--Selenium进阶篇

    篇7                            python自动化测试应用-Selenium进阶篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),本篇文章将是我们介 ...

  4. Linux基础（7）

    Linux 基础(7) 一.内存的监控(free) free -m 以单位为MB的方式查看内存的使用情况(free命令读取的文件是/proc/meminfo) total:是指计算机安装的内存总量 u ...

  5. jquery ajax自定义分页组件(jquery.loehpagerv1.0)原创

    简单的两个步骤截可调用 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></ ...

  6. java并发程序——BlockingQueue

    概述 BlockingQueue顾名思义'阻塞的队列',是指在:队列的读取行为被阻塞直到队列不为空时,队列的写入行为被阻塞直到队列不满时.BlockingQueue是java.util.concurr ...

  7. MongoDB副本集的搭建

    副本集是mongodb提供的一种高可用解决方案.相对于原来的主从复制,副本集能自动感知primary节点的下线,并提升其中一个Secondary作为Primary. 整个过程对业务透明,同时也大大降低 ...

  8. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  9. Android ViewPager动画切换

    使用方法 setPageTransformer 例如: ViewPager.setPageTransformer(true, new ZoomOutPageTransformer()) package ...

  10. python 用户交互

    #coding=utf8 name = input("name:") age = int(input("age:")) job = input("jo ...