PPHTMLImagePreviewDemoiOS APP 中 HTML 預(yù)覽圖片

該DEMO主要用于演示iOS APP中點(diǎn)擊HTML的圖片來預(yù)覽圖片，效果可以查看下面的演示圖：

原理闡述

1. 背景知識

在了解該原理之前，需要知道如下內(nèi)容

• html中的點(diǎn)擊動(dòng)作一般都是通過javascript來實(shí)現(xiàn)的，如下面代碼:

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

  PS: 以上代碼實(shí)現(xiàn)的: 點(diǎn)擊< img>來彈出含test的提示框.

• javascript與objc交互

在iOS APP開發(fā)過程中，是通過UIWebView來加載html頁面，因此javascript要與objc交互，橋梁應(yīng)該就在UIWebview提供的API中，可以發(fā)現(xiàn)如下一些接口:

//objc 傳參給javascript
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

//javascript 傳參給objc， 參數(shù)是存在于request中
 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

2. 實(shí)現(xiàn)細(xì)節(jié)

• 在UIWebview加載完html后，調(diào)用stringByEvaluatingJavaScriptFromString來執(zhí)行如下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許可.