iOS中动态注入JavaScript方法。动态给html标签添加事件
项目中有这样一种需求，给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标签添加事件的更多相关文章
- iOS中产生随机数的方法
利用arc4random_uniform()产生随机数 Objective-C 中有个arc4random()函数用来生成随机数且不需要种子,但是这个函数生成的随机数范围比较大,需要用取模的算法对随机 ...
- ios中NSUserDefaults的使用方法
ios中NSUserDefaults的使用方法 NSUserDefaults类提供了一个与默认系统进行交互的编程接口.NSUserDefaults对象是用来保存.恢复应用程序相关的偏好设置,配置数据等 ...
- WebView动态注入JavaScript脚本
Demo地址:https://gitee.com/chenyangqi/YouMeDai 背景介绍 在Android与JavaScript交互一文中学习了原生和JS交互,但是如果我们想和别人开发好的w ...
- iOS中数组遍历的方法及比较
数组遍历是编码中很常见的一种需求,我们来扒一拔iOS里面都有什么样的方法来实现,有什么特点. 因为ios是兼容C语言的,所以c语言里面的最最常见的for循环遍历是没有问题的. 本文中用的数组是获取的系 ...
- iOS中数组遍历的方法及比較
数组遍历是编码中非经常见的一种需求.我们来扒一拔iOS里面都有什么样的方法来实现,有什么特点. 由于iOS是兼容C语言的.所以C语言里面的最最常见的for循环遍历是没有问题的. 本文中用的数组是获取的 ...
- 关于时间排序在ios中失效的处理方法
上个月公司做项目的时候在列表排序的时候产品加了一个需求,通过点击量,发布时间,评论量进行筛选的一个需求. 一开始在电脑上测试基本没问题,然后我也就放下了这个按耐不住的小心脏,然后在完成所有模块后 sh ...
- datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)
一.动态定义列头 在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对 我自定义了Mock数据,用于前端自己交互. 其中,rowdata用于存放传回的数据,co ...
- iOS中的静态库与动态库，区别、制作和使用
如果我们有些功能要给别人用,但是又不想公开代码实现,比如高德地图.第三方登录分享等等,这时候我们就要打包成库了.库分静态库和动态库两种: 静态库:以.a 和 .framework为文件后缀名.动态库: ...
- iOS 中的静态库与动态库，区别、制作和使用
如果我们有些功能要给别人用,但是又不想公开代码实现,比如高德地图.第三方登录分享等等,这时候我们就要打包成库了.库分静态库和动态库两种: 静态库:以.a 和 .framework为文件后缀名.动态库: ...
随机推荐
- 初识JS
今儿我遇到一特别恐怖的事儿,JS 刚开始的我看到JS感觉是懵逼的,翻开第一页,感觉是棒棒哒,再看第二页,感觉是easy的,看到第三页是恐怖的,当看到的第四页的时候,我感觉今年的清明节是为我准备的 废话 ...
- LinkCode 整数排序II
http://www.lintcode.com/zh-cn/problem/sort-integers-ii/ 题目 给一组整数,按照升序排序.使用归并排序,快速排序,堆排序或者任何其他 O(n lo ...
- CentOS 下PHP的卸载
一.卸载1.使用命令 rpm -qa|grep 列出需要卸载的软件包rpm -qa|grep php使用rpm -e 加包名rpm -e php-4.3.9-3.15 二.安装1.首先更新系统yum ...
- Apache Ranger对HDFS的访问权限控制的原理分析（一）
介绍 Aapche Ranger是以插件的形式集成到HDFS中,由Ranger Admin管理访问策略,Ranger插件定期轮询Admin更新策略到本地,并根据策略信息进行用户访问权限的判定.Rang ...
- Java中四种遍历List的方法
package com.ietree.basic.collection.loop; import java.util.ArrayList; import java.util.Iterator; imp ...
- Struts2框架的基本使用
前面已经介绍过了MVC思想,Struts2是一个优秀的MVC框架,大大降低了各个层之间的耦合度,具有很好的扩展性.从本篇开始我们学习Struts2的基本用法,本篇主要包括以下内容: Stru ...
- 安卓和iOS移动APP开发设计应该考虑哪些问题
应该考虑哪些问题 现在用移动设备上网的用户越来越多,企业也可以从移动APP端挖掘潜在用户,想要设计好一款移动APP,我们需要考虑哪几个问题呢? 首先 我们应该先确认清楚企业的移动互联网战略目标是什么? ...
- [CTSC1999]【网络流24题】星际转移
Description 由于人类对自然资源的消耗,人们意识到大约在2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地 ...
- H5万能选择器：iosselect
iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...
- TP5学习基础一：增删改查小demo
①TP5--增删改查简单的demo 我先吐槽一下:因为工作需要研究tp5,去官网看了一下哎呦,资源挺多挺全啊!然后下载唯一免费的官方教程,我曹pdf打开533页.讲的很细但是开发能等看完才做吗?看到精 ...