Posted at

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

More than 1 year has passed since last update.

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


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


基本的な使い方


Swift

UIWebViewではなく、WKWebViewを使用します。

WKUserContentControllerでJavaScriptで実行するコールバックを登録します。

実行されたコールバックはWKScriptMessageHandleruserContentControllerで受け取れます。

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
}