JS交互点击WKWebView中的图片实现预览效果

Swift 4.0
WKWebView

1.注入js代码 （重点）

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
  let jsGetImages =
    \"function getImages(){\" +
    \"var objs = document.getElementsByTagName(\\\"img\\\");\" +
    \"var imgScr = \'\';\" +
    \"for(var i=0;i<objs.length;i++){\" +
    \"imgScr = imgScr + objs[i].src + \'+\';\" +
    \"};\" +
    \"return imgScr;\" +
    \"};\"
  webView.evaluateJavaScript(jsGetImages, completionHandler: nil)
  webView.evaluateJavaScript(\"getImages()\") { (data, err) in
    let imageUrl:String = data as! String
    var urlArry = imageUrl.components(separatedBy: \"+\")
    urlArry.removeLast()
    self.imgUrlArray.addObjects(from: urlArry)
    for url in self.imgUrlArray{
      let photo = SKPhoto.photoWithImageURL(url as! String)
      photo.shouldCachePhotoURLImage = false // you can use image cache by true(NSCache)
      self.images.append(photo)
    }
  }
  var jsClickImage:String
  jsClickImage = 
    \"function registerImageClickAction(){\" +
    \"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}\" +
    \"}\" +
    \"}\"
  webView.evaluateJavaScript(jsClickImage, completionHandler: nil)
  webView.evaluateJavaScript(\"registerImageClickAction()\", completionHandler: nil)
}

2.使用SKPhotoBrowser框架实现图片预览功能

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
  let requestString = navigationAction.request.url?.absoluteString
  print(requestString!)
  if (requestString?.hasPrefix(\"image-preview\"))!{
    let imgUrl = NSString.init(string: requestString!).substring(from: \"image-preview:\".count )
    let index = imgUrlArray.index(of: imgUrl)
    let browser = SKPhotoBrowser(photos: images)
    browser.initializePageIndex(index)
    present(browser, animated: true, completion: {})
  }
  decisionHandler(.allow) //一定要加上这句话 
}

以上所述是小编给大家介绍的JS交互点击WKWebView中的图片实现预览效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！