Heim  >  Artikel  >  Web-Frontend  >  JS klickt interaktiv auf das Bild in WKWebView und zeigt eine Vorschau des Beispiels an

JS klickt interaktiv auf das Bild in WKWebView und zeigt eine Vorschau des Beispiels an

小云云
小云云Original
2018-01-08 09:09:111940Durchsuche

In diesem Artikel wird hauptsächlich das interaktive Klicken auf Bilder in WKWebView vorgestellt. Freunde in Not können sich darauf beziehen.

  • Swift 4.0

  • WKWebView

1. js-Code einfügen (Hervorhebung)

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 + &#39;+&#39;;" +
    "};" +
    "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(&#39;img&#39;);" +
    "var length=imgs.length;" +
    "for(var i=0;i<length;i++){" +
    "img=imgs[i];" +
    "img.onclick=function(){" +
    "window.location.href=&#39;image-preview:&#39;+this.src}" +
    "}" +
    "}"
  webView.evaluateJavaScript(jsClickImage, completionHandler: nil)
  webView.evaluateJavaScript("registerImageClickAction()", completionHandler: nil)
}

2. Verwenden Sie das SKPhotoBrowser-Framework, um die Bildvorschaufunktion zu implementieren

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) //一定要加上这句话 
}

Verwandte Empfehlungen:

IOS verwendet WKWebView zum Laden des Videofehlercodes = 204

IOS HTML-Rich-Text-Rendering-Methode: Vergleich der Speichernutzung von DTCoreText, WKWebView, UIWebView_html/css_WEB-ITnose

Detaillierte Erläuterung der WebView-Wissenspunkte

Das obige ist der detaillierte Inhalt vonJS klickt interaktiv auf das Bild in WKWebView und zeigt eine Vorschau des Beispiels an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn