[Android][Kotlin]JavaScriptと相互通信

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

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

基本的な使い方

Kotlin

webChromeClientの onJsAlertを使用してJavascriptのalertに渡された文字列を受け取ります。
戻り値のBooleanでAlertViewの表示を制御します。
true: 表示しない, false: 表示する
※AlertViewを表示しない場合、見た目上は表示されていないのですが、透明なAlertViewが表示された状態となっているようでそのままだと操作不能になってしまうため、 result.cancel()でAlertのキャンセルを実行してAlertViewを閉じる必要があります。
Javascriptのalertに渡した文字列はmessageで受け取っています。

webView = findViewById(R.id.webView) as WebView
webView.setWebChromeClient(object : WebChromeClient() {
  override fun onJsAlert(view: WebView, url: String, message: String, result: JsResult): Boolean {
    if (message == 'hoge') {
      // do something
    }
    result.cancel()
    return true
  }
})

Javascript

通常のalertと同じように実行します。

alert("hoge");

値を受け渡したい場合

受け渡せるのは文字列のみなので、値を渡したい場合は少し工夫が必要です。
私の場合は「:」をセパレータにして メソッド名:変数1:変数2:... のようにして渡しています。

Kotlin

webView = findViewById(R.id.webView) as WebView
webView.setWebChromeClient(object : WebChromeClient() {
  override fun onJsAlert(view: WebView, url: String, message: String, result: JsResult): Boolean {
    val components = message.split(":")
    if (components[0] == 'hoge') {
      val number = components[1]
    }
    result.cancel()
    return true
  }
})

Javascript

var number = 123;
alert("hoge:" + number);

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

基本的な使い方

Kotlin

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

webView.evaluateJavascript("window.hoge()", null)

Javascript

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

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

値を受け渡したい場合

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

Kotlin

webView.evaluateJavascript("window.hoge($number)", null)

Javascript

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