WKWebView 2 图文富文本, 点击图片

首先此文章借鉴了学习计划 (3,4) - WKWebview 实现浏览大图并保存本地
上一篇：WKWebView 1 加载图文富文本
使用WKWebView加载的富文本中的图片，怎么能做到点击图片识别呢
首先，不能有这种 js 方法执行

//禁止点击
webView.evaluateJavaScript("document.documentElement.style.webkitTouchCallout='none';", completionHandler: nil)

再didFinish方法中先查找图片的 url

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { 
//获取所有图片
        let jsImage = """
        function getImages(){\
        var objs = document.querySelectorAll(\"body img\");\
        var imgScr = '';\
        for(var i=0;i<objs.length;i++){\
        imgScr = imgScr + objs[i].src + '+';\
        };\
        return imgScr;\
        };
        """
        webView.evaluateJavaScript(jsImage, completionHandler: nil)
        webView.evaluateJavaScript("getImages()") { [weak self](result, error) in
            let imageStr = (result as? String) ?? ""
            let urlArr = imageStr.components(separatedBy: "+")
            if self?.imageUrlArray.count == 0 {
                for url in urlArr {
//记录所有的图片 url
                    if url.isEmpty == false {
                        self?.imageUrlArray.append(url)
                    }
                }
            }
        }
}

再didFinish方法中添加点击识别

    public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

let registerImg = """
        function registerImageClickAction(){\
        var imgs = document.getElementsByTagName('img');\
        for(var i=0;i<imgs.length;i++){\
        imgs[i].customIndex = i;\
        imgs[i].onclick=function(){\
        window.location.href=''+this.src;\
        }\
        }\
        }
        """
        webView.evaluateJavaScript(registerImg, completionHandler: nil)
        webView.evaluateJavaScript("registerImageClickAction();", completionHandler: nil)
    }

最后，拦截系统的点击事件，使用自己的点击放大图片方法

 func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        //如果是跳转一个新页面
        if navigationAction.targetFrame?.request != nil {
            let selectedImageUrl = navigationAction.request.url?.absoluteString ?? ""
///这里是我使用的一个三方放大图片控件
            if selectedImageUrl.contains("http") {
                var imgArr = [GKPhoto]()
                var clickIndex = 0
                 
                for (index, imageUrl) in imageUrlArray.enumerated() {
                    if selectedImageUrl == imageUrl {
                        clickIndex = index
                    }
                    let photo = GKPhoto()
                    photo.url = URL(string: imageUrl)!
                    imgArr.append(photo)
                }
                let browser = GKPhotoBrowser(photos: imgArr, currentIndex: clickIndex)
                browser.showStyle = .none
                browser.show(fromVC: self)
                
                decisionHandler(.cancel)
            } else {
                decisionHandler(.allow)
            }
            print(selectedImageUrl)
        } else {
            decisionHandler(.cancel)
        }
    } 

然后完成