Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

基本的な使い方

Kotlin

webChromeClientonJsAlertを使用して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
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした