[iOS][Swift]JavaScriptと相互通信

WebViewでJavascriptとSwiftの双方向通信を行う方法です。

JavascriptからSwiftのメソッドを実行する

基本的な使い方

Swift

UIWebViewではなく、WKWebViewを使用します。
WKUserContentControllerでJavaScriptで実行するコールバックを登録します。
実行されたコールバックはWKScriptMessageHandlerのuserContentControllerで受け取れます。
Javascript側で呼び出したコールバックはmessage.nameで取得できます。

class ViewController: UIViewController, WKScriptMessageHandler {

    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfig: WKWebViewConfiguration = WKWebViewConfiguration()
        let userController: WKUserContentController = WKUserContentController()
        userController.add(self, name: "hoge")
        webConfig.userContentController = userController
        let wkWebView = WKWebView(frame: frame, configuration: webConfig)
        self.view.addSubview(wkWebView)
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "hoge" {
            // do something
        }
    }
}

Javascript

window.webkit.messageHandlers.hoge.postMessage("");

値を受け渡したい場合

Swift

message.bodyで取得できます。

class ViewController: UIViewController, WKScriptMessageHandler {

    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfig: WKWebViewConfiguration = WKWebViewConfiguration()
        let userController: WKUserContentController = WKUserContentController()
        userController.add(self, name: "hoge")
        webConfig.userContentController = userController
        let wkWebView = WKWebView(frame: frame, configuration: webConfig)
        self.view.addSubview(wkWebView)
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "hoge" {
            let number = message.body as! String
            // do something
        }
    }
}

Javascript

postMessageの引数に渡したい値をセットします。

var number = 123;
window.webkit.messageHandlers.hoge.postMessage(number);

SwiftからJavaScriptのメソッドを実行する

基本的な使い方

Swift

evaluateJavaScriptを使用してJavascript側で拡張したwindowオブジェクトを呼び出します。

wkWebView.evaluateJavaScript("window.hoge();", completionHandler: nil)

Javascript

windowオブジェクトを拡張することでSwift側からの呼び出しを受け付けます。

window.hoge = function() {
  // do something
}

値を受け渡したい場合

Swift

通常のメソッドを呼び出すのと同じように引数を渡して呼びます。
※呼び出すメソッド自体を文字列にする必要があるので、「\()」もしくは「+」で連結します。

wkWebView.evaluateJavaScript("window.hoge(\(number));", completionHandler: nil)

Javascript

window.hoge = function(number) {
  // do something
}