How to call a Kotlin function from JavaScript

Question

I am trying to fill a TextView located inside WebView (in Android) with random email generated by Kotlin function using JavaScript but not found any solution.

My Kotlin function for generating random email address

fun getSaltString(): String? {
    val SALTCHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
    val salt = StringBuilder()
    val rnd = Random()
    while (salt.length < 7) { // length of the random string.
        val index = (rnd.nextFloat() * SALTCHARS.length) as Int
        salt.append(SALTCHARS[index])
    }
    return salt.toString()
}

And here is the call to the above function using Kotlin getSaltString()+"@gmail.com" but what I don't know how to call it from JavaScript?

My JavaScript call so far

myWebView.loadUrl("javascript:(function(){document.getElementById(\"user_email_login\").value = \"I don't know how to call @gmail.com\";\n})()");

Any help would be highly appreciated. Thanks in advance:)

@T.J. Crowder WebView in android. I just want to automate form filling by doing this. — Elizabeth Harper, Apr 02 '21 at 12:30
maybe https://stackoverflow.com/questions/32163517/run-javascript-code-in-webview? — Alberto Sinigaglia, Apr 02 '21 at 12:38
@Berto99 I think my question is not matching with the above-suggested answer. — Elizabeth Harper, Apr 02 '21 at 12:44
Yes, that question is the reverse. @ElizabethHarper the official documentation on how to do this is here: https://developer.android.com/guide/webapps/webview#BindingJavaScript — Tenfour04, Apr 02 '21 at 14:41

score 1 · Accepted Answer · answered Apr 03 '21 at 13:59

I don't have time to test this, but hopefully it's right. You need a class that contains your function(s) that you want to be able to call from JS. An instance of this class will be bound to your WebView. Each function in the class needs the annotation @JavascriptInterface before it.

I made the content of your function more concise, just as a tip.

class WebAppInterface {

    @JavascriptInterface
    fun getSaltString(): String = buildString {
        val saltChars = ('A'..'Z').toList() + ('0'..'9').toList()
        repeat(7) {
            append(saltChars.random())
        }
    }

}

Then you register an instance of this class with the webview. Whatever String name you pass here will be what you prepend calls with in your JS:

myWebView.addJavascriptInterface(WebAppInterface(), "Android")
myWebView.loadUrl("javascript:(function(){document.getElementById(\"user_email_login\").value = Android.getSaltString() + \"@gmail.com\";\n})()");

score 0 · Answer 2 · answered Apr 04 '21 at 10:05

I found the solution and it was very simple at least in my case.

What I need to fill my Email TextBox In (Android WebView) randomly generated by the Kotlin Function.

My Function For Generating Random Text

fun getSaltString(): String? {
    val SALTCHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
    val salt = StringBuilder()
    val rnd = Random()
    while (salt.length < 7) { // length of the random string.
        val index = (rnd.nextFloat() * SALTCHARS.length).toInt()
        salt.append(SALTCHARS[index])
    }
    return salt.toString()
}

Now I declared two variables to hold the value of my random email.

 val temporaryEmailaddress: String? = getSaltString()
 val EmailAddressFinal: String? = "$temporaryEmailaddress@gmail.com"

And finally, a simple call to the EmailAddressFinal variable is done the trick. :)

myWebView.loadUrl("javascript:(function(){document.getElementById(\"user_email_login\").value = \"$EmailAddressFinal\";\n})()");

How to call a Kotlin function from JavaScript

2 Answers2