JS交互 点击WKWebView中的图片实现预览效果

  • 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

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中的图片实现预览效果_第1张图片
IMG_0303.JPG
JS交互 点击WKWebView中的图片实现预览效果_第2张图片
IMG_0304.JPG
JS交互 点击WKWebView中的图片实现预览效果_第3张图片
IMG_0307.JPG
JS交互 点击WKWebView中的图片实现预览效果_第4张图片
IMG_0308.JPG

你可能感兴趣的:(JS交互 点击WKWebView中的图片实现预览效果)