This article mainly introduces JS interactive clicking on pictures in WKWebView to achieve preview effects. Friends in need can refer to
Swift 4.0
WKWebView
1. Inject js code (emphasis)
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. Use SKPhotoBrowser framework to implement image preview function
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) //一定要加上这句话 }
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to calculate polygon centroid in JavaScript
About the use of custom form controls in Angular19
How to use switch selector in WeChat applet
Detailed interpretation of Angular error 404 issues
How to use the slider component in the WeChat applet
How to remember the password to the cookie in vue
AngularJS important version update
Instructions for using button components in WeChat mini programs
The above is the detailed content of How to implement preview effect in JS. For more information, please follow other related articles on the PHP Chinese website!