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 textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
es6函数之严格模式用法实例分析
Mar 17 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变量引用的面试题
2010/08/08 PHP
php的memcached客户端memcached
2011/06/14 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
学习和使用python的13个理由
2019/07/30 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
应用服务器有那些
2012/01/19 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
安全大检查实施方案
2014/02/22 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python