iOS APP中HTML預覽圖片：PPHTMLImagePreviewDemo

該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
  
  

  項目主頁：http://www.baiduhome.net/lib/view/home/1437573409099