PPHTMLImagePreviewDemo 1. 背景知识2. 实现细节 介绍
该DEMO主要用于演示iOS APP中点击HTML的图片来预览图片,效果可以查看下面的演示图
原理阐述
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许可.
联系方式
email: lvyexuwenfa100@126.com
PPHTMLImagePreviewDemo 1. 背景知识2. 实现细节 官网
https://github.com/smallmuou/PPHTMLImagePreviewDemo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。