文档章节

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

琳小兮
 琳小兮
发布于 2015/06/12 10:40
字数 557
阅读 7055
收藏 19
点赞 3
评论 4
  • 在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
博文 36
码字总数 19544
作品 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
楼主写的很棒 请问一下 我的图片点击没有响应是什么情况
小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle
04/24
0
0
小程序iOS客户端框架—控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle
04/26
0
0
iOS中UIWebView的使用详解

iOS中UIWebView的使用详解 一、初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (voi...

珲少
2015/06/23
0
1
常见的移动端H5页面开发遇到的坑和解决办法

手机共通问题 问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果...

webmirror
05/02
0
0
IOS下WEBVIEW 的javascript数组与json定义 及交互

最近在折腾IOS新闻浏览客户端,当中需要用到webview传递JSON数据到IOS上,然后在IOS上解析。刚入门IOS不久,看了不少的书,但都是囫囵吞枣。在开发过程中,遇到不少问题。 开发环境 mac mini...

GIFCOOL
2013/08/20
0
0
iOS开发技巧(系列十:UITableView及其Cell的一些细节)

今天看开源代码,有些UITableView方面细节的东西,整理了与大家共享, 1、设置UITableViewCell的accessoryView 有时候我们需要设置cell的一些样式,比如下图, 这个就是设置了cell的accesso...

召唤攻城狮
2014/05/09
0
0
iOS Simulator功能介绍关于Xamarin IOS开发

iOS Simulator功能介绍关于Xamarin IOS开发 iOS Simulator功能介绍 在图1.38所示的运行效果中,所见到的类似于手机的模型就是iOS Simulator。在没有iPhone或iPad设备时,可以使用iOS Simulat...

大学霸
2015/04/17
0
0
iOS UIWebView 使用大全

一、UIWebView的基础使用 以上是IOS中UIWebView的基础使用要点详解,接下来一些UIWebView的常用注意点。 二、IOS中UIWebView常用注意点: 1、与UIWebView进行交互,调用web页面中的需要传参的...

朝雨晚风
2016/08/15
0
0
定制iOS 7中的导航栏和状态栏

由于种种原因,申请了一个开源中国的帐号,也许会由于我的不耐心,不会亲自去一步步的写博文,但准备把自己看到的好的,都转载过来,就当时资源的存储,也算是一种推广吧。 iOS 7 教程:定制...

谁家的阿毛
2013/11/21
0
0
(转)直接拿来用!最火的iOS开源项目(二)

“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目...

孙启超
2013/06/21
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

页面输出JSON格式数据

package com.sysware.utils;import java.io.IOException;import javax.servlet.ServletResponse;import org.apache.log4j.Logger;import com.sysware.SyswareConstant;pub......

AK灬
19分钟前
0
0
springCloud-2.搭建Eureka Client的使用

1.使用IDEA,Spring Initializr创建 2.填写项目资料 3.选择spring boot版本,插件选择Cloud Discovery→Eureka Discovery 4.选择保存地址 5.修改application.yml eureka: client: s...

贺小康
22分钟前
0
0
CenOS 6.5 RPM 安装 elasticsearch 6.3.1

下载 wget --no-check-certificate https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.1.rpm...

阿白
24分钟前
0
0
1.4 创建虚拟机&1.5 安装CentOS7&1.6 配置ip(上)&1.7 配置ip(下)

1.4 创建虚拟机 知识点 虚拟机网络链接模式 桥连 直接将虚拟网卡桥接到一个物理网卡上面。需要手工为虚拟系统配置IP地址、子网掩码,而且还要和宿主机器处于同一网段,这样虚拟系统才能和宿主...

小丑鱼00
31分钟前
0
0
TrustAsia(亚洲诚信)助力看雪2018安全开发者峰会

2018年7月21日,看雪2018安全开发者峰会在北京国家会议中心圆满落下帷幕。拥有18年悠久历史的老牌安全技术社区——看雪学院联手国内最大开发者社区CSDN,汇聚业内顶尖的安全开发者和技术专家...

亚洲诚信
32分钟前
0
0
Spring注解介绍

@Resource、@AutoWired、@Qualifier 都用来注入对象。其中@Resource可以以 name 或 type 方式注入,@AutoWired只能以 type 方式注入,@Qualifier 只能以 name 方式注入。 但它们有一些细微区...

lqlm
42分钟前
0
0
32位汇编在64位Ubuntu上的汇编和连接

本教程使用的操作系统是Ubuntu Linux 18.04 LTS版本,汇编器是GNU AS(简称as),连接器是GNU LD(简称ld)。 以下是一段用于检测CPU品牌的汇编小程序(cpuid2.s): .section .dataoutput...

ryanliue
52分钟前
0
0
CentOS系统启动报错Failed to mount /sysroot解决方法

xfs_repair -v -L /dev/dm-0

Mr_Tea伯奕
今天
1
0
美团点评云真机平台实践

背景 随着美团点评业务越来越多,研发团队越来越庞大,对测试手机的需求显著增长。这对公司来说是一笔不小的开支,但现有测试手机资源分配不均,利用率也非常有限,导致各个团队开发、测试过...

美团技术团队
今天
0
0
eclipse SVN 项目重新定位

SVN 重新定位 1.方法一 首先:在Eclipse中选择Windows-> Show View->others 就会出现【SVN资源库/SVN Repositories】,选中后,点击确认; 然后:选中原有的地址,选择【重新定位/Relocate】...

qimh
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部