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,_ 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