Swift点击H5图片Native预览

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看152 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 152|回复: 2
收起左侧

Swift点击H5图片Native预览

[复制链接]
女汉子 发表于 2016-8-22 04:31:49 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码

最近很多朋友看到了我的JS与OC/Swift交互的文章,经常有朋友问HTML中的图片在点击时如何在原生预览?这个问题其实很简单,只是一直没有动手去实践过。今天借着闲时,动手写了个demo,只是实现了点击接收,不实现预览功能,怎么预览就是大家要做的事了。

本篇文章只是说明通过怎样的方式接入,才能让iOS Native与Js交互,当然这里不会使用JavaScriptCore这个库,也不会使用任何第三方,如UIWebViewJavaScriptBridge。

Swift点击H5图片Native预览 1

Swift点击H5图片Native预览 - 敏捷大拇指 - Swift点击H5图片Native预览 1





1、实现代码

实现思路:面对iOS与JS交互,最直接的就是UIWebView的代理方法。那么,提炼出来的问题就是:如何知道H5中的图片被点击了?在点击以后又如何在iOS端判断?针对第一个问题,最直接的方式就是注入图片点击的JS代码。针对第二个问题,最直接的方式就是通过注入特定的scheme来识别:

[Swift] 纯文本查看 复制代码
class ViewController: UIViewController, UIWebViewDelegate {
  var webView = UIWebView()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    self.view.addSubview(self.webView)
    self.webView.delegate = self
    self.webView.frame = self.view.bounds
    self.webView.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.cocoachina.com/programmer/20160113/14976.html")!))
  }
  
  
  // MARK: UIWebViewDelegate
  func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
    let scheme = "hyb-image-preview:"
    // 由于我们注入了JS,在点击HTML中的图片时,就会跳转,然后在此处就可以拦截到
    if ((request.URL?.scheme.hasPrefix(scheme)) != nil) {
      // 获取原始图片的URL
      let src = request.URL?.absoluteString.stringByReplacingOccurrencesOfString(scheme, withString: "")
      if let imageUrl = src {
        // 原生API展开图片
        // 这里已经拿到所点击的图片的URL了,剩下的部分,自己处理了
        // 有时候会感觉点击无响应,这是因为webViewDidFinishLoad,还没有调用。
        // 调用很晚的原因,通常是因为H5页面中有比较多的内容在加载
        // 因此,若是原生APP与H5要交互,H5要尽可能地提高加载速度
        // 不相信?在webViewDidFinishLoad加个断点就知道了
        print(imageUrl)
      }
    }
    
    return true
  }
  
  func webViewDidFinishLoad(webView: UIWebView) {
    // 在H5页面加载完成时,注入图片点击的JS代码
    let js = "function addImgClickEvent() { " +
      "var imgs = document.getElementsByTagName('img');" +
      // 遍历所有的img标签,统一加上点击事件
      "for (var i = 0; i < imgs.length; ++i) {" +
      "var img = imgs[i];" +
      "img.onclick = function () {" +
      // 给图片添加URL scheme,以便在拦截时可能识别跳转
      "window.location.href = 'hyb-image-preview:' + this.src;" +
      "}" +
      "}" +
    "}"
    // 注入JS代码
    self.webView.stringByEvaluatingJavaScriptFromString(js)
    
    // 执行所注入的JS
    self.webView.stringByEvaluatingJavaScriptFromString("addImgClickEvent();")
  }
}


这里需要到写JS函数,如何JS都不懂,那就不知道怎么办了,当然让后台帮你写也是可以的。这里所实现的功能是非常简单的,只是往H5中注入了JS函数,然后执行所注入的JS函数,给所有的img标签添加上onclick事件处理,在img被点击时,重新载入图片就会回调我们UIWebView的shouldStartLoadWithRequest代理方法,然后在此处识别是否是我们所指定的scheme,如果是,则认为这个是我们要处理的图片预览。

Swift点击H5图片Native预览 2

Swift点击H5图片Native预览 - 敏捷大拇指 - Swift点击H5图片Native预览 2





2、源代码

请大家到我的GITHUB地址下载吧:HTMLImagePreviewDemo


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

射鸡狮 发表于 2016-8-22 18:00:16 | 显示全部楼层
Swift啥时候打通CSS?PS?
h5lover 发表于 2016-8-28 14:50:19 | 显示全部楼层
不用JavaScriptCore,不用UIWebViewJavaScriptBridge,那是??
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表