In diesem Artikel wird hauptsächlich das interaktive Klicken auf Bilder in WKWebView vorgestellt, um Vorschaueffekte zu erzielen. Freunde, die es benötigen, können darauf verweisen
Swift 4.0
WKWebView
1. Injizieren Sie js-Code (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 + '+';" + "};" + "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. 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) //一定要加上这句话 }
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
So berechnen Sie den Polygonschwerpunkt in JavaScript
Informationen zur Verwendung benutzerdefinierter Formularsteuerelemente in Angular19
So verwenden Sie den Schalterwähler im WeChat-Miniprogramm
Detaillierte Interpretation von Winkelfehler-404-Problemen
Wie um die Slider-Komponente im WeChat-Applet zu verwenden
So merken Sie sich das Passwort für das Cookie in Vue
AngularJS wichtiges Versionsupdate
Anleitung zur Verwendung von Button-Komponenten in WeChat-Miniprogrammen
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Vorschaueffekt in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!