基础知识:
在平时展示复杂的富文本的时候,我们可以通过UIWebView来实现.
Snip20171220_11.png
如果我们需要监听富文本的点击并做相应的处理,就需要用到JS与Swift的交互了.
大致流程:
Swift端:
- 声明协议及在JS中需要调用的方法
- 实现方法(监听到点击后你需要实现的操作)
- 初始化webview.
- 实现webview的代理方法optional public func webViewDidFinishLoad(_ webView: UIWebView),在里面拿到JSContext,关联swift中的对象与JS中的对象.
JS端:
- 添加点击操作,在里面调用与swift关联的对象,实现关联对象的方法即可.
应用:
如上图,点击图片时方法图片:
*声明协议,协议要遵守JSExport,这样才可以把协议内的方法暴露在JS中.
import JavaScriptCore
import WebKit
import Foundation
@objc protocol JavaScriptSwiftDelegate:JSExport
{
func clickImage(_ imageUrl: String)
}
- 实现方法(监听到点击后你需要实现的操作)
func clickImage(_ imageUrl: String) {
debugPrint("放大图片")
}
- 初始化webview及关联对象
这里把self与JS中的control关联起来了,所以在JS中,可以使用control调用协议里面声明的方法
var jsContext = JSContext()
func webViewDidFinishLoad(_ webView: UIWebView) {
self.jsContext = webView.value(forKeyPath: "documentView.webView.mainFrame.javaScriptContext") as! JSContext?
self.jsContext?.setObject(self, forKeyedSubscript: "control" as (NSCopying & NSObjectProtocol)!)
}
- 在JS中点击图片的方法里调用协议声明的方法:
RE.setImageClick = function(){
var objs = document.getElementsByTagName("img");
for(var i=0;i<objs.length;i++){
objs[i].onclick=function(){
window.control.clickImage(this.src);
}
}
}
效果如下(点击图片放大的代码没有放上来):
数字1.gif
