JS交互點擊WKWebView中的圖片實現(xiàn)預覽效果
更新時間:2018年01月05日 10:36:08 作者:z小志
這篇文章主要介紹了JS交互點擊WKWebView中的圖片實現(xiàn)預覽效果,需要的朋友可以參考下
- 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框架實現(xiàn)圖片預覽功能
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) //一定要加上這句話 }
總結(jié)
以上所述是小編給大家介紹的JS交互點擊WKWebView中的圖片實現(xiàn)預覽效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
深入理解JS中Number(),parseInt(),parseFloat()三者比較
這篇文章主要介紹了JS中Number(),parseInt(),parseFloat()三者比較,需要的朋友可以參考下2018-08-08動態(tài)統(tǒng)計當前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解
這篇文章主要介紹了動態(tài)統(tǒng)計當前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解的相關資料,希望通過本文能幫助到大家,讓大家實現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解
這篇文章主要介紹了JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09