文档章节

iOS开发 之 WebView点击图片看大图效果

琳小兮
 琳小兮
发布于 2015/06/12 10:40
字数 557
阅读 7364
收藏 19
  • 在webViewDelegate里面添加如下代码:

  • - (void)webViewDidFinishLoad:(UIWebView *)aWebView {
    
        //调整字号
        NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";
        [webView stringByEvaluatingJavaScriptFromString:str];
        
        //js方法遍历图片添加点击事件 返回图片个数
        static  NSString * const jsGetImages =
        @"function getImages(){\
        var objs = document.getElementsByTagName(\"img\");\
                                                 for(var i=0;i<objs.length;i++){\
                                                     objs[i].onclick=function(){\
                                                         document.location=\"myweb:imageClick:\"+this.src;\
                                                     };\
                                                 };\
                                                 return objs.length;\
                                                 };";
        
        [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
        
        //注入自定义的js方法后别忘了调用 否则不会生效(不调用也一样生效了,,,不明白)
        NSString *resurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
        //调用js方法
    //    NSLog(@"---调用js方法--%@  %s  jsMehtods_result = %@",self.class,__func__,resurlt);
    }
  • - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
        //将url转换为string
        NSString *requestString = [[request URL] absoluteString];
    //    NSLog(@"requestString is %@",requestString);
        
        //hasPrefix 判断创建的字符串内容是否以pic:字符开始
        if ([requestString hasPrefix:@"myweb:imageClick:"]) {
            NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
    //        NSLog(@"image url------%@", imageUrl);
            
            if (bgView) {
                //设置不隐藏,还原放大缩小,显示图片
                bgView.hidden = NO;
                imgView.frame = CGRectMake(10, 10, SCREEN_WIDTH-40, 220);
                [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];
            }
            else
                [self showBigImage:imageUrl];//创建视图并显示图片
            
            return NO;
        }
        return YES;
    }
  • 创建放大图片的视图

  • #pragma mark 显示大图片
    -(void)showBigImage:(NSString *)imageUrl{
        //创建灰色透明背景,使其背后内容不可操作
        bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
        [bgView setBackgroundColor:[UIColor colorWithRed:0.3
                                                   green:0.3
                                                    blue:0.3
                                                   alpha:0.7]];
        [self.view addSubview:bgView];
        
        //创建边框视图
        UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH-20, 240)];
        //将图层的边框设置为圆脚
        borderView.layer.cornerRadius = 8;
        borderView.layer.masksToBounds = YES;
        //给图层添加一个有色边框
        borderView.layer.borderWidth = 8;
        borderView.layer.borderColor = [[UIColor colorWithRed:0.9
                                                        green:0.9
                                                         blue:0.9
                                                        alpha:0.7] CGColor];
        [borderView setCenter:bgView.center];
        [bgView addSubview:borderView];
        
        //创建关闭按钮
        UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    [closeBtn setImage:[UIImage imageNamed:@"close.png"] forState:UIControlStateNormal];
        closeBtn.backgroundColor = [UIColor redColor];
        [closeBtn addTarget:self action:@selector(removeBigImage) forControlEvents:UIControlEventTouchUpInside];
        [closeBtn setFrame:CGRectMake(borderView.frame.origin.x+borderView.frame.size.width-20, borderView.frame.origin.y-6, 26, 27)];
        [bgView addSubview:closeBtn];
        
        //创建显示图像视图
        imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, CGRectGetWidth(borderView.frame)-20, CGRectGetHeight(borderView.frame)-20)];
        imgView.userInteractionEnabled = YES;
        [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];
        [borderView addSubview:imgView];
        
        //添加捏合手势
        [imgView addGestureRecognizer:[[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)]];
        
    }
  • 实现关闭和捏合手势的方法

  • //关闭按钮
    -(void)removeBigImage
    {
        bgView.hidden = YES;
    }
    
    - (void) handlePinch:(UIPinchGestureRecognizer*) recognizer
    {
        //缩放:设置缩放比例
        recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
        recognizer.scale = 1;
    }

效果图如下

© 著作权归作者所有

琳小兮
粉丝 30
博文 66
码字总数 31201
作品 0
襄阳
程序员
私信 提问
加载中

评论(4)

靖锅锅
m
moonwinter
写的很好啊,网上搜到这个问题,看到有些网站和个人直接把你的文章原封不动的照搬过去了,但是却没有注明来源,真是替作者忿忿不平呢
贴两个盗文地址:
http://www.w2bc.com/Article/44789
http://www.open-open.com/code/view/1434098895614
z
zxiaowei
<div>
<img width="320.000000" height="300.000000" src="http://114.215.171.217:80/image/f?fileName=null_1436866458461.jpg" onclick="imageClick()">
<script type="text/javascript">
function imageClick(){document.location = "ClickImage:"}
</script>
<br />
</div>

附上我的html代码
z
zxiaowei
楼主写的很棒 请问一下 我的图片点击没有响应是什么情况
驰骋工作流引擎-CCMobile与安卓、IOS集成过程中的问题与解决方案

CCMobile与安卓、IOS集成过程中的问题与解决方案 前言: CCMobile(2019版本)是CCFlow&JFlow 的一款移动端审批的产品。系统基于mui框架开发,是一款可以兼容Android与IOS的移动端工作流审批...

孟娟
06/26
75
0
基于原生的移动跨平台研究和实践

基于原生主要是针对基于webview+h5比较来说的,基于H5的我不想再讨论了,我想尝试的是从UI到功能都是原生,而不是用H5模拟的所谓原生体验。 背景 我们从开发角度来考虑,但凡想从事长远的开发...

voxer
2017/03/26
141
0
在 Flutter 中使用 WebView

本文示例代码可在微信公众号「01二进制」后台回复「WebView」查看下载 前言 我们知道在开发 Native App 时经常会有打开网页的需求,可供的选择通常只有两种: 在 App 内部打开网页 通过调用系...

雇个城管打天下
08/07
0
0
iOS与JS交互之WKWebView-WKUIDelegate协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKUIDelegate」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前端...

QiShare
2018/09/03
0
0
iOS 知识-常用小技巧大杂烩

打印View所有子视图 2. layoutSubviews调用的调用时机 3. NSString过滤特殊字符 4. TransForm属性 5. 去掉分割线多余15像素 6. 计算方法耗时时间间隔 7. Color颜色宏定义 8. Alert提示宏定义...

冰泪_
2016/05/26
73
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部