Rumah > hujung hadapan web > tutorial js > JS交互点击WKWebView中的图片并预览实例

JS交互点击WKWebView中的图片并预览实例

小云云
Lepaskan: 2018-01-08 09:09:11
asal
2040 orang telah melayarinya

本文主要介绍了JS交互点击WKWebView中的图片实现预览效果,需要的朋友可以参考下,希望能帮助到大家。

  • Swift 4.0

  • WKWebView

1.注入js代码 (重点)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

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 + &#39;+&#39;;" +

    "};" +

    "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(&#39;img&#39;);" +

    "var length=imgs.length;" +

    "for(var i=0;i<length;i++){" +

    "img=imgs[i];" +

    "img.onclick=function(){" +

    "window.location.href=&#39;image-preview:&#39;+this.src}" +

    "}" +

    "}"

  webView.evaluateJavaScript(jsClickImage, completionHandler: nil)

  webView.evaluateJavaScript("registerImageClickAction()", completionHandler: nil)

}

Salin selepas log masuk

2.使用SKPhotoBrowser框架实现图片预览功能

1

2

3

4

5

6

7

8

9

10

11

12

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) //一定要加上这句话 

}

Salin selepas log masuk

相关推荐:

iOS用WKWebView加载视频报错Code=204

IOS Html富文本渲染方式:DTCoreText、WKWebView、UIWebView的内存占用对比_html/css_WEB-ITnose

关于 WebView 知识点的详解

Atas ialah kandungan terperinci JS交互点击WKWebView中的图片并预览实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan