基础知识:

在平时展示复杂的富文本的时候,我们可以通过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