ObjC点击H5图片Native预览

最近很多朋友看到了我的JS与OC/Swift交互的文章，经常有朋友问HTML中的图片在点击时如何在原生预览？这个问题其实很简单，只是一直没有动手去实践过。今天借着闲时，动手写了个demo，只是实现了点击接收，不实现预览功能，怎么预览就是大家要做的事了。

本篇文章只是说明通过怎样的方式接入，才能让iOS Native与Js交互，当然这里不会使用JavaScriptCore这个库，也不会使用任何第三方，如UIWebViewJavaScriptBridge。

实现代码

实现思路：面对iOS与JS交互，最直接的就是UIWebView的代理方法。那么，提炼出来的问题就是：如何知道H5中的图片被点击了？在点击以后又如何在iOS端判断？针对第一个问题，最直接的方式就是注入图片点击的JS代码。针对第二个问题，最直接的方式就是通过注入特定的scheme来识别：

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

UIWebView *webview = [[UIWebView alloc] initWithFrame:self.view.bounds];

[self.view addSubview:webview];

webview.delegate = self;

[webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cocoachina.com/programmer/20160113/14976.html"]]];

}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

if ([request.URL.scheme hasPrefix:@"hyb-image-preview"]) {

// 获取原始图片的完整URL

NSString *src = [request.URL.absoluteString stringByReplacingOccurrencesOfString:@"hyb-image-preview:" withString:@""];

if (src.length > 0) {

// 原生API展开图片

// 这里已经拿到所点击的图片的URL了，剩下的部分，自己处理了

// 有时候会感觉点击无响应，这是因为webViewDidFinishLoad,还没有调用。

// 调用很晚的原因，通常是因为H5页面中有比较多的内容在加载

// 因此，若是原生APP与H5要交互，H5要尽可能地提高加载速度

// 不相信？在webViewDidFinishLoad加个断点就知道了

NSLog(@"所点击的HTML中的img标签的图片的URL为：%@", src);

}

return YES;

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

NSString *js = @"function addImgClickEvent() { \

var imgs = document.getElementsByTagName('img'); \

for (var i = 0; i < imgs.length; ++i) { \

var img = imgs[i]; \

img.onclick = function () { \

window.location.href = 'hyb-image-preview:' + this.src; \

}; \

} \

}";

// 注入JS代码

[webView stringByEvaluatingJavaScriptFromString:js];

// 执行所注入的JS代码

[webView stringByEvaluatingJavaScriptFromString:@"addImgClickEvent();"];

}

@end

这里需要到写JS函数，如何JS都不懂，那就不知道怎么办了，当然让后台帮你写也是可以的。这里所实现的功能是非常简单的，只是往H5中注入了JS函数，然后执行所注入的JS函数，给所有的img标签添加上onclick事件处理，在img被点击时，重新载入图片就会回调我们UIWebView的shouldStartLoadWithRequest代理方法，然后在此处识别是否是我们所指定的scheme，如果是，则认为这个是我们要处理的图片预览。

原文链接 http://www.huangyibiao.com/archives/441

转载于:https://www.cnblogs.com/jasonTc/p/5844691.html

ObjC点击H5图片Native预览相关推荐

配置全局less变量；解决iphoneX、 iphone8 plus 键盘退下去仍占空间，导致无法点击；vue-photo-preview 配置正常，但无法触发图片的预览
1.配置全局less变量 pluginOptions: {"style-resources-loader": {preProcessor: "less",pat ...
微信小程序：常用功能6——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)
向用户展示图片时,为了展现布局的美观性,往往不同尺寸的图片要放在相同大小的容器中. 但是图片想让用户看清.或者保存时,我们就要进行图片的预览,像用户展示原图. 图片预览接口:wx.previewIma ...
微信小程序：点击图片进行预览
在开发需求中,经常有类似与九宫格的图片展示,当点击图片时进行图片的预览,如果多图的情况还可以左右滑动. 小程序中具体实现效果如下: WXML <view class='imgList'> ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
H5上传照片、图片及预览裁剪
H5上传照片.图片及预览裁剪忙里得闲将之前工作中遇到的问题进行总结要实现该效果主要分三步一.如何获取图片及照片甚至打开手机摄像头刚开始做的时候,本人也是一片茫然,怎么获取图片甚至控制摄像机?在 ...
html图片点击局部放大,jQuery教程 css+jQuery实现图片局部放大预览
本篇教程介绍了jQuery教程 css+jQuery实现图片局部放大预览,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 今天有时间开始动手,使用css+jquer ...
H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

ObjC点击H5图片Native预览

实现代码

ObjC点击H5图片Native预览相关推荐

最新文章

热门文章