本文共 2109 字，大约阅读时间需要 7 分钟。

转载自：

概述

该DEMO主要用于演示iOS APP中点击HTML的图片来实现本地预览，如下是演示图

原理阐述

1. 背景知识

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

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

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

  PS: 以上代码实现的是点击< img id="test">来弹出含test的提示框. 当然可以通过getElementsByTagName，getElementsByClassName获取标签元素

• 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代码，可以使用压缩下

  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

附上主要代码：

- (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;}- (void)webViewDidFinishLoad:(UIWebView *)webView {    [self.webView stringByEvaluatingJavaScriptFromString:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0;i

转载地址：https://windzen.blog.csdn.net/article/details/53610289 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！