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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python获取当前时间的方法
2014/01/14 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python使用OpenCV进行标定
2018/05/08 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
django加载本地html的方法
2018/05/27 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
代码解析React中setState同步和异步问题
2021/06/03 Javascript