点击HTML的图片来预览图片
发布日期:2022-03-18 08:27:44
浏览次数:33
分类:技术文章
本文共 2109 字,大约阅读时间需要 7 分钟。
转载自:
概述
该DEMO主要用于演示iOS APP中点击HTML的图片来实现本地预览,如下是演示图
原理阐述
1. 背景知识
在了解该原理之前,需要知道如下内容:
html中的点击动作一般都是通过javascript来实现的,如下面代码:
var img = document.getElementById('test');img.onclick = function() { alert("test");}
PS: 以上代码实现的是点击
< img id="test">
来弹出含test的提示框. 当然可以通过getElementsByTagName
,getElementsByClassName
获取标签元素javascript与objc交互
在iOS APP开发过程中,是通过UIWebView来加载html页面,因此javascript要与objc交互,桥梁应该就在UIWebview提供的API中,通过查找,发现如下一些接口://objc 传参给javascript- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;//javascript 传参给objc, 参数是存在于request中 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
2. 实现细节
在UIWebview加载完html后,调用
stringByEvaluatingJavaScriptFromString
来执行如下javascript
代码,可以使用压缩下function assignImageClickAction() { 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 }}}assignImageClickAction();
在
webView:shouldStartLoadWithRequest:navigationType
处理image-preview
附上主要代码:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { //预览图片 if ([request.URL.scheme isEqualToString:@"image-preview"]) { NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]]; path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; [self.imageView setImageWithURL:[NSURL URLWithString:path] placeholderImage:[UIImage imageNamed:@"default"] usingActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite]; [UIView animateWithDuration:0.2f animations:^{ self.imageView.alpha = 1.0f; }]; return NO; } return YES;}- (void)webViewDidFinishLoad:(UIWebView *)webView { [self.webView stringByEvaluatingJavaScriptFromString:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0;i
转载地址:https://windzen.blog.csdn.net/article/details/53610289 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
留言是一种美德,欢迎回访!
[***.207.175.100]2024年03月25日 12时10分19秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
2020牛客暑期多校训练营(第一场)B-Suffix Array (后缀数组+思维)
2021-06-30
P5058 [ZJOI2004]嗅探器(割点的理解)
2021-06-30
解决Atom下载插件遇到的failed问题!!!
2021-06-30
P1646 [国家集训队]happiness(文理分科网络流)
2021-06-30
P5934 [清华集训2012]最小生成树(思维+最小割)
2021-06-30
P4304 [TJOI2013]攻击装置(最大独立集)
2021-06-30
P5039 [SHOI2010]最小生成树(连通性+最小割)
2021-06-30
P3159 [CQOI2012]交换棋子(模型转换:拆点费用流)
2021-06-30
【模板】2-SAT 问题
2021-06-30
P4322 [JSOI2016]最佳团体(树上背包+01分数规划)
2021-06-30
CF277E Binary Tree on Plane(二叉树::二分图匹配)
2021-06-30
P4589 [TJOI2018]智力竞赛(上下界网络流)
2021-06-30
P4194 矩阵(二分+有源汇可行流)
2021-06-30
P5782 [POI2001] 和平委员会(2-SAT)
2021-06-30
P6378 [PA2010] Riddle(2-SAT的前缀和优化建图)
2021-06-30
P3825 [NOI2017] 游戏(构造2-SAT模型)
2021-06-30
P3288 [SCOI2014]方伯伯运椰子(流量守恒,分数规划)
2021-06-30
P3931 SAC E#1 - 一道难题 Tree(树dp)
2021-06-30
P3872 [TJOI2010]电影迷(扩展最大全闭合图)
2021-06-30
2021湖南多校对抗赛第三场 D - Division(优化dp)
2021-06-30