Swift与Js通过WebView交互

开发环境：Swfit 2.3 XCode 8.2

基础概念

• JSContext, JSContext是代表JS的执行环境，通过-evaluateScript:方法就可以执行一JS代码
• JSValue, JSValue封装了JS与ObjC中的对应的类型，以及调用JS的API等
• JSExport, JSExport是一个协议，遵守此协议，就可以定义我们自己的协议，在协议中声明的API都会在JS中暴露出来，才能调用

Swift代码

import UIKit
import JavaScriptCore

// 这里必须使用@objc，因为JavaScriptCore库是ObjectiveC版本的。如果不加@objc，则调用无效果
@objc protocol VideoJsDelegate:JSExport {
    func playLog(videoId:String)
    func existsCollectVideo(collectId:String, _ handleName:String, _ typeStr:String)
}

@objc class VideoJsModel: NSObject, VideoJsDelegate {
    var jsContext:JSContext!
    func playLog(videoId:String) {
        print(videoId)
    }

    func existsCollectVideo(collectId:String, _ handleName:String, _ typeStr:String) {
        // 回调JS里定义的函数
        let handleFunc = self.jsContext.objectForKeyedSubscript(handleName)
        let dict = ["type": typeStr, "status": false]
        handleFunc?.callWithArguments([dict])
    }
}

class YoukuViewController: UIViewController, UIWebViewDelegate {

    var jsContext:JSContext!

    @IBOutlet weak var web: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let url = "http://weixin.leijiaocn.com"
        let nsUrl = NSURL(string: url)
        self.web.loadRequest(NSURLRequest(URL: nsUrl!))
        self.web.delegate = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


    // MARK: 绑定JS交互事件
    func webViewDidFinishLoad(webView: UIWebView) {
        self.jsContext = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as! JSContext
        let model = VideoJsModel()

        model.jsContext = self.jsContext
        // 将jiajiao100app注入到JS中，在JS让jiajiao100app以对象的形式存在
        self.jsContext.setObject(model, forKeyedSubscript: "jiajiao100app")

        let curUrl = webView.request?.URL?.absoluteString    //WebView当前访问页面的链接 可动态注册
        self.jsContext.evaluateScript(try? String(contentsOfURL: NSURL(string: curUrl!)!, encoding: NSUTF8StringEncoding))

        self.jsContext.exceptionHandler = { (context, exception) in
            print("exception：", exception)
        }
    }
}

html代码

var existsCollectVideo = function() {
    if(window.jiajiao100app) {
        window.jiajiao100app.existsCollectVideo(albumId, "VideoCollectionHandle", "existsCollectVideo");
    }
};

var playLog = function(str) {
    if(window.jiajiao100app) {
        window.jiajiao100app.playLog(str);
    }
};

var VideoCollectionHandle = function(d) {
    alert(d.status);
};

existsCollectVideo();

playLog("hello world");

参考文章

• http://blog.sina.com.cn/s/blog_a5243c7f0102wd3c.html
• http://blog.csdn.net/json_vip/article/details/51615029