美文网首页iOS日常
JS与Swift的交互

JS与Swift的交互

作者: BigBowen | 来源:发表于2017-12-20 15:12 被阅读15次

基础知识:

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

相关文章

网友评论

    本文标题:JS与Swift的交互

    本文链接:https://www.haomeiwen.com/subject/cbiwwxtx.html