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

Swift4.0WKWebView1.注入js代码（重点）funcwebView(_webView:WKWebView,didFinishnavigation:WKNavigation!){letjsGetI

• 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中的图片实现预览效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！