iOS HTML图片本地预览

• 引言

　　相信用过苹果手机的童鞋，会发现很多新闻类的应用，都可以实现HTML图片本地预览，那么这是如何实现的呢？本文将深入阐述其中的原理.

　　关于此功能，我还实现了一个DEMO，大家可以点击此访问更详细内容

　　 

•  原理

　　接触过web开发的人，就了解与html元素交互都是通过javascript进行的，比如点击、滑动等，比如点击<img>标签的响应代码如下

 var img = document.getElementById('test');
 img.onclick = function() {
     do some thing
 }

　　

　　顺着这个思路往下想，就可以推测出，在iOS中实现点击图片本地预览，也应该是跟javascript交互的，于是问题转换成了javascript与objc的交互. 关于javascript与objc的交互，google下一大堆，看似很复杂，其实非常简单，我这里简单阐述下，大家都知道在iOS中是用UIWebView控件来显示HTML的，那么javascript与objc要实现交互，桥梁必须是UIWebView，通过查看UIWebView提供的相关接口，可以找到如下接口:

 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

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

第一个接口一目了然，即执行javascript，于是就打通了objc到javacript的路，那么javascript到objc呢？答案就是第二个接口，因为当html点击一个新链接就会执行该接口来判定是否要进入新链接，于是只有让javascript去改变href从而来触发第二个接口的调用，就能打通了javascript到objc的路，参数当然存放于request的href中。

　　在了解了javascript与objc的交互，还有一个小问题，即何时去执行javascript？查看UIWebView文档，发现可以在如下接口中调用

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

• 实现

 　　在webViewDidFinishLoad执行如下javascript代码，大致功能是遍历html中所有<img>元素，并添加onclick事件，在onclick中修改window.location.href，以触发UIWebView调用webView:shouldStartLoadWithRequest:navigationType接口，参数是image-preview:+<img>标签的src属性

 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();

　　上述javascript可以通过压缩，实际代码如下

 - (void)webViewDidFinishLoad:(UIWebView *)webView {
     [self.webView stringByEvaluatingJavaScriptFromString:@"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}}}"];

     [self.webView stringByEvaluatingJavaScriptFromString:@"assignImageClickAction();"];
 }

　　当用户点击<img>会触发如下代码

 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
     //预览图片
     if ([request.URL.scheme isEqualToString:@"image-preview"]) {
         NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
         path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

         [self.imageView setImageWithURL:[NSURL URLWithString:path] placeholderImage:[UIImage imageNamed:@"default"] usingActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];

         [UIView animateWithDuration:0.2f animations:^{
             self.imageView.alpha = 1.0f;
         }];

         return NO;
     }
     return YES;
 }

• 综述

　　至此，大家应该明白了iOS APP点击HTML实现本地预览的原理，当然这仅仅只是个开始，你可以修改window.location.href传递的值，从而实现更多功能，比如小图、大图预览等，大家可以到这里下载源码.