PPHTMLImagePreviewDemo 1. 背景知识2. 实现细节 iOS APP中HTML预览图片

程序名称：PPHTMLImagePreviewDemo 1. 背景知识2. 实现细节

授权协议: MIT

操作系统: iOS

开发语言: Objective-C

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: [e-mail]

PPHTMLImagePreviewDemo 1. 背景知识2. 实现细节 官网

https://github.com/smallmuou/PPHTMLImagePreviewDemo