Transferring String data between Java and JavaScript using Webview in both directions

Question

Transferring String data between Java and JavaScript using Webview in both directions

I'm currently developing an application that allows two users to communicate via a webview. My goal is to transfer a String variable from JavaScript to Java in order to store it in my SQLite database, and also be able to do the reverse operation as well.

javascript java android webview

Answer 1

Answer №1

Invoking Java/Kotlin code from JavaScript

If you need to trigger Java or Kotlin code from your JavaScript, Android WebView offers a solution known as Javascript Interface.

This feature enables the execution of java/kotlin functions from within your javascript code.

To accomplish this, you can create an interface like so:

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

In this snippet, WebAppInterface defines the methods that can be invoked from javascript.

/** Create an instance of the interface and provide the context  */
class WebAppInterface(private val mContext: Context) {
     /** Display a toast on the web page  */
     @JavascriptInterface
     fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
     }
}

The name "Android" serves as the bridge between your webview and javascript, allowing for method calls in the latter.

With this setup, calling these methods from your javascript becomes possible:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
    Android.showToast(toast);
}
</script>

Note that callbacks from the interface do not always occur in the main thread. To execute UI-related tasks, remember to utilize runOnUiThread.

Triggering JavaScript function from Java/Kotlin code

For scenarios where you need to call javascript functions from your Java or Kotlin code in Android WebView, you can leverage the Evaluate Javascript feature introduced in API level 19.

Here's an example with the following javascript method:

<script type="text/javascript">
function printName(name) {
    console.log(name); 
}
</script>

You can invoke this JavaScript function using the following code:

yourWebview.evaluateJavascript("printName(\'TEST\')")

Answer 2

Invoking Java/Kotlin code from JavaScript

If you need to trigger Java or Kotlin code from your JavaScript, Android WebView offers a solution known as Javascript Interface.

This feature enables the execution of java/kotlin functions from within your javascript code.

To accomplish this, you can create an interface like so:

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

In this snippet, WebAppInterface defines the methods that can be invoked from javascript.

/** Create an instance of the interface and provide the context  */
class WebAppInterface(private val mContext: Context) {
     /** Display a toast on the web page  */
     @JavascriptInterface
     fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
     }
}

The name "Android" serves as the bridge between your webview and javascript, allowing for method calls in the latter.

With this setup, calling these methods from your javascript becomes possible:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
    Android.showToast(toast);
}
</script>

Note that callbacks from the interface do not always occur in the main thread. To execute UI-related tasks, remember to utilize runOnUiThread.

Triggering JavaScript function from Java/Kotlin code

For scenarios where you need to call javascript functions from your Java or Kotlin code in Android WebView, you can leverage the Evaluate Javascript feature introduced in API level 19.

Here's an example with the following javascript method:

<script type="text/javascript">
function printName(name) {
    console.log(name); 
}
</script>

You can invoke this JavaScript function using the following code:

yourWebview.evaluateJavascript("printName(\'TEST\')")

Transferring String data between Java and JavaScript using Webview in both directions

Answer №1

Similar questions

How can we identify if a React component is stateless/functional?

Potential 'undefined' object detected in Vuex mutation using TypeScript

Dynamic text displayed on an image with hover effect using JavaScript

Uploading a screenshot to a server using Ionic 4

Executing multiple selections using the Selenium Webdriver

Viewer model aggregation - coordinating problem

A guide to incorporating a textview into a React application using the Google Maps API

Difficulty comprehending the fallback for JSON.parse in jQuery.parseJSON

The Jquery append() method seems to be having issues specifically in the Internet Explorer

Comparing the distinction between the unique constraint annotation in Hibernate and utilizing a PostgreSQL query

Retrieve the 'current' scope using a 'master' controller

What is the most effective way to extract the value of a "$3" element using Selenium in Python?

Using Javascript and JQuery to create an alert that pops up upon loading the page is not effective

The absence of parentheses in the @query Java JPA statement was noticed

Efficiently sending VueJS data to a separate script

What is the reason for getting a null return when attempting to access a resource within a Jar file using a URL

JavaScript Decoding JSON with varying identifiers

What is the best way to integrate JavaScript into an Express Handlebars template using partials?

What is the correct method for adjusting the height properties of an element?

What is the best way to limit the number of items shown in a cart dropdown using JavaScript