本文共 3820 字，大约阅读时间需要 12 分钟。

     这是漫画WKWebView的续篇。在此文中主要是实现给WKWebView 注入Js实现点击图片预览的需求。话不多说先看下成品效果：

实现这个需求无疑就是实现Js与WKWebView交互操作，包括传值和相互调用。这个话题网络上有成堆的文章来介绍，本文中只用到了很少的一部分即：注入Js动态给img添加点击事件向WKWebView传值，原生响应事件获取参数来实现预览，落脚点是传值。整理下思路，app中可以使用Scheme、请求拦截和 JavaScriptCore以及WKScriptMessageHandler等。

       这里先吐槽两句网络上很多文章都没检验原本照抄，比如：documentView.webView.mainFrame.javaScriptContext 这个对象在UIWebView中可用，但在WKWebView 中直接崩溃闪退。而这是使用JavaScriptCore的必要一环，这个坑浪费了我很多时间。因此，此处只有两个选项了请求拦截和WKScriptMessageHandler。本文中主要使用的 WKScriptMessageHandler。主要参考代码如下：

1、定义WKWebView以及指定WKNavigationDelegate协议

private lazy var wkWebView:WKWebView = {[unowned self] in        let _wk = WKWebView.init(frame: .zero)        _wk.navigationDelegate = self               return _wk   }()

2、实现WKNavigationDelegate协议以及注入Js事件(备注：注入jQuery库时，需要去jQuery官网下载文件，加到项目中，否则没法注入)

//MARK: - WKNavigationDelegatefunc webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.15) {            self.pourIntoJsFor(WKWebView: webView)        }    }    /// 注入Jsprivate func pourIntoJsFor(WKWebView webView:WKWebView){        //注入jQuery库(由于很多H5使用的VUE或者Ajax等技术异步加载渲染，因此此处需要借助jQuery库给一步渲染的img动态绑定事件，如果是静态H5或者H5中已有该文件则无需注入jQuery库)        let jQueryPath = Bundle.main.path(forResource: "jQuery-3.5.1.mini", ofType: "js")        if let jQueryDat:Data = try? Data.init(contentsOf: URL.init(fileURLWithPath: jQueryPath!)) {            webView.evaluateJavaScript(String.init(data: jQueryDat, encoding: .utf8)!) { [self] (_:Any?, error:Error?) in                print("jQuery注入\(error == nil ? "成功":"失败")")                                if error == nil {                    //注入图片点击的脚本事件                    let strJs = String.init(format:"var imgUrl='';var objs=document.getElementsByTagName('img');for(var i=0;i

3、初始化添加Js注入对象

private let js_message_handler_name = "CommunityJSObj"    override init(frame: CGRect) {        super.init(frame: frame)        self.addSubview(self.wkWebView)                //注意在这里注入JS对象名称        self.wkWebview.configuration.userContentController.add(self, name: js_message_handler_name)    }

注意：window.webkit.messageHandlers.xxx.postMessage  是特定写法大小写保持一致，中间的xxx 是自定义的注入对象名称，本文中是js_message_handler_name 定义的常量对象

如果没有参数，可以这样写：

window.webkit.messageHandlers.xxx.postMessage();

一个参数可以这样写：

window.webkit.messageHandlers.xxx.postMessage({body:参数值1});

或者这样写：

window.webkit.messageHandlers.xxx.postMessage({参数名1:参数值1});

多个参数可以这样写：

window.webkit.messageHandlers.xxx.postMessage({参数名1:参数值1,参数值2,……});

4、实现WKScriptMessageHandler协议，响应H5中注入的img点击事件

//MARK: - WKScriptMessageHandlerfunc userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {                    /**         message:WKScriptMessage对象         message.name:注入JS对象名称         message.body:js回传参数         */        print(message)        print(message.name)        print(message.body)                //图片预览        if message.name == js_message_handler_name {            guard let _dicTemp = message.body as? [String:String] else {                return            }                        guard let curl = _dicTemp["curl"],let imgUrls:[String] = _dicTemp["imgUrl"]?.split(separator: ",").compactMap({ "\($0)" }) else {                return            }                        print("curl:\(curl),imgUrls:\(imgUrls)")                 }  }

点击图片响应的信息打印如下：

5、销毁对象

deinit {        self.wkWebview.configuration.userContentController.removeScriptMessageHandler(forName:js_message_handler_name)                //清除wkWebView缓存        let dt = WKWebsiteDataStore.allWebsiteDataTypes()        let date = Date.init(timeIntervalSince1970: .zero)        WKWebsiteDataStore.default().removeData(ofTypes: dt, modifiedSince: date) {            print("wkWebView 缓存清除Ok")        }    }

另外关于请求拦截的话题后续会写博客阐述，实现该功能也可以采用该方法

本文结束！以上内容就是这些，有问题欢迎留言沟通。

转载地址：https://blog.csdn.net/yimiyuangguang/article/details/114642196 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！