这是漫画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: - WKNavigationDelegate
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.15) {
self.pourIntoJsFor(WKWebView: webView)
}
}
/// 注入Js
private 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<objs.length;i++){imgUrl+=objs[i].src+',';$(objs[i]).on('click',function(){window.webkit.messageHandlers.%@.postMessage({curl:this.src,imgUrl});});}",js_message_handler_name)
print("strJs:\(strJs)")
webView.evaluateJavaScript(strJs) { (_:Any?, error:Error?) in
print("Js注入\(error == nil ? "成功":"失败")")
}
}
}
}
}
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: - WKScriptMessageHandler
func 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")
}
}
另外关于请求拦截的话题后续会写博客阐述,实现该功能也可以采用该方法
本文结束!以上内容就是这些,有问题欢迎留言沟通。