This article mainly introduces JS interactive clicking on pictures in WKWebView to achieve preview effects. Friends who need it can refer to it. I hope it can help everyone.
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 the SKPhotoBrowser framework to implement the 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) //一定要加上这句话 }
Related recommendations:
IOS uses WKWebView to load videos and reports an error Code=204
Detailed explanation of WebView knowledge points
The above is the detailed content of JS interactively clicks on the picture in WKWebView and previews the example. For more information, please follow other related articles on the PHP Chinese website!