[Swift版]H5點擊圖片預覽

如果您正在找的是Objective-C版，請閱讀： http://www.henishuo.com/objc-html-img-preview/

 
classViewController: UIViewController, UIWebViewDelegate {
  varwebView = UIWebView()
  
  overridefuncviewDidLoad() {
    super.viewDidLoad()
    
    self.view.addSubview(self.webView)
    self.webView.delegate = self
    self.webView.frame = self.view.bounds
    self.webView.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.cocoachina.com/programmer/20160113/14976.html")!))
  }
  
  
  // MARK: UIWebViewDelegate
  funcwebView(webView: UIWebView, shouldStartLoadWithRequestrequest: NSURLRequest,navigationType: UIWebViewNavigationType) -> Bool {
    letscheme = "hyb-image-preview:"
    // 由于我們注入了JS，在點擊HTML中的圖片時，就會跳轉，然后在此處就可以攔截到
    if ((request.URL?.scheme.hasPrefix(scheme)) != nil) {
      // 獲取原始圖片的URL
      letsrc = request.URL?.absoluteString.stringByReplacingOccurrencesOfString(scheme,withString: "")
      if letimageUrl = src {
        // 原生API展開圖片
        // 這里已經拿到所點擊的圖片的URL了，剩下的部分，自己處理了
        // 有時候會感覺點擊無響應，這是因為webViewDidFinishLoad,還沒有調用。
        // 調用很晚的原因，通常是因為H5頁面中有比較多的內容在加載
        // 因此，若是原生APP與H5要交互，H5要盡可能地提高加載速度
        // 不相信？在webViewDidFinishLoad加個斷點就知道了
        print(imageUrl)
      }
    }
    
    return true
  }
  
  funcwebViewDidFinishLoad(webView: UIWebView) {
    // 在H5頁面加載完成時，注入圖片點擊的JS代碼
    letjs = "function addImgClickEvent() { " +
      "var imgs = document.getElementsByTagName('img');" +
      // 遍歷所有的img標簽，統一加上點擊事件
      "for (var i = 0; i < imgs.length; ++i) {" +
      "var img = imgs[i];" +
      "img.onclick = function () {" +
      // 給圖片添加URL scheme，以便在攔截時可能識別跳轉
      "window.location.href = 'hyb-image-preview:' + this.src;" +
      "}" +
      "}" +
    "}"
    // 注入JS代碼
    self.webView.stringByEvaluatingJavaScriptFromString(js)
    
    // 執行所注入的JS
    self.webView.stringByEvaluatingJavaScriptFromString("addImgClickEvent();")
  }
}