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 相关文章推荐
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
js同源策略详解
May 21 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
javascript实现滚轮轮播图片
Dec 13 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中函数rand和mt_rand的区别比较
2012/12/26 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
详解Python3中的Sequence type的使用
2015/08/01 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python OpenCV实现视频分帧
2019/06/01 Python
Python银行系统实战源码
2019/10/25 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python如何提升爬虫效率
2020/09/27 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
网络管理员岗位职责
2014/03/17 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
就业协议书怎么填
2014/09/15 职场文书
反腐倡廉观后感
2015/06/08 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
创业计划书之美容店
2019/09/16 职场文书