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

Learn how to utilize ng2-file-upload in Angular for uploading .ply files effortlessly!

Incorporating various language URLs in Next.js using next-i18n-next functionality

Automatic button rotation

Can you explain the concept of a framework operating "on top of" node.js in a way that would be easy for a beginner to understand?

Express npm dependency fails to start globally

Combine multiple arrays in JavaScript into a single array

Ways to detect scrolling activity on the v-data-table module?

Using an object does not result in updated data, while data changes are typically observed when using a variable

Tips for transferring the button ID value to a GET request?

Utilizing ion-slide-box within an ion-content container that allows for scrolling

Unable to retrieve the status for the specified ID through the use of AJAX

An issue has occurred in AngularJS where the error message "ng areq not

ng-init assign value to a new object

Problem encountered when attempting to add elements to an array within a nested

Creating a React functional component that updates state when a specific window breakpoint is reached

Performing an ASync call to the GetData routine in MongoClient using NodeJS

Having trouble running Javascript with jQuery's ajax load()?

Menu changes when hovering

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

What could be causing my Angular code to submit back unexpectedly?