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


Posted in Javascript onJanuary 05, 2018
  • 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 相关文章推荐
jquery操作select元素和option的实例代码
Feb 03 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
原生js实现随机点名
Jul 05 Javascript
小程序实现tab标签页
Nov 16 Javascript
Vue组件的使用教程详解
Jan 05 #Javascript
基于three.js编写的一个项目类示例代码
Jan 05 #Javascript
js中this对象用法分析
Jan 05 #Javascript
Node中使用ES6语法的基础教程
Jan 05 #Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 #Javascript
vue脚手架中配置Sass的方法
Jan 04 #Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 #Javascript
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python的时间模块datetime详解
2017/04/17 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
幼教简历自我评价
2014/01/28 职场文书
太太口服液广告词
2014/03/20 职场文书
公司董事长岗位职责
2014/06/08 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
交通事故和解协议书
2014/09/25 职场文书
国庆节慰问信
2015/02/15 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android