这篇文章主要介绍了js交互点击wkwebview中的图片实现预览效果,需要的朋友可以参考下
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) //一定要加上这句话 }
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在javascript中如何计算多边形质心
在angular19中有关自定义表单控件使用
在微信小程序中如何使用switch开关选择器
详细解读angular有关报错404问题
在微信小程序中如何使用slider组件
在vue中如何实现记住密码到cookie上
angularjs重要版本更新
在微信小程序中有关button组件的使用说明
以上就是在js中如何实现预览效果的详细内容。