PPHTMLImagePreviewDemo 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
PPHTMLImagePreviewDemo 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
PPHTMLImagePreviewDemo 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 iOS
软件类型 开源软件
所属分类 iOS代码库图像(Image)
开源组织
地区 国产
投 递 者 smallmuou
适用人群 未知
收录时间 2015-07-22

软件简介

该DEMO主要用于演示iOS APP中点击HTML的图片来预览图片,效果可以查看下面的演示图:

image

原理阐述

1. 背景知识

在了解该原理之前,需要知道如下内容

  • html中的点击动作一般都是通过javascript来实现的,如下面代码:

    var img = document.getElementById('test');
    img.onclick = function() {
    alert("test");
    }

    PS: 以上代码实现的: 点击< img>来弹出含test的提示框.

  • 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代码,可以使用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

许可

该代码遵循MIT许可.

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
5 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部