JS交互点击WKWebView中的图片实现预览效果
更新时间:2018年01月05日 10:36:08 作者:z小志
这篇文章主要介绍了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) //一定要加上这句话
}
总结
以上所述是小编给大家介绍的JS交互点击WKWebView中的图片实现预览效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
关于javascript中限定时间内防止按钮重复点击的思路详解
下面小编就为大家带来一篇关于javascript中限定时间内防止按钮重复点击的思路详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
兼容:IE7以上版本及FF;(腾讯的WebQQ3.0好像也不兼容IE6,其实这样挺好的)2011-04-04
javascript中定义私有方法说明(private method)
本篇文章主要是对javascript中定义私有方法(private method)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助2014-01-01


最新评论