How to get content from WebView in jetpack compose

Question

How to get content from WebView in jetpack compose

363 views Asked by Slava At 03 January 2024 at 13:02

I have editable webview. I'm using webview as rich text editor. WebViewClient as AccompanistWebViewClient.

And on onPageFinished I have css injection to webview view?.evaluateJavascript(js, null)

but how can I return content from webview? I want retrieve webview content from my ViewModel class

val fullContentHtml =
        rememberWebViewStateWithHTMLData(data = "$contentEditableHtml$messageContentHtml</div>")
        WebView(
            modifier = Modifier
                //.verticalScroll(rememberScrollState())
                .fillMaxSize()
                .padding(horizontal = 8.dp),
            state = fullContentHtml,
            onCreated = { webView ->
                webView.settings.javaScriptEnabled = true
                webView.settings.allowContentAccess = true
            },
            client = remember { webViewClient },
            chromeClient =
            remember {
                chromeViewClient
            }
        )

Original Q&A

There are 1 answers

**Chirag Thummar** · Answer 1 · 2024-01-04T06:35:04+00:00

Here is a simple example of how to communicate to Android System using Webview In Jetpack Compose.

Here we have taken a sample HTML file and a simple JavaScript Function.

After that make an interface which will deal with JavaScript and act upon it.

Sample HTML File with JavaScript

<!DOCTYPE >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
           function init()
           {
              var testVal = 'Hello Android !!';
              AndroidFunction.showToast(testVal);
           }
        </script>
</head>
<body>
<div style="clear: both;height: 3px;"> </div>
<div>
    <p><h1>Jetpack Compose Webview Communication Example</h1></p>
    <input value="submit" type="button" name="submit"
           id="btnSubmit" onclick="javascript:return init();" />
</div>
</body>
</html>

Make an interface to deal with JavaScript

import android.content.Context
import android.webkit.JavascriptInterface
import android.widget.Toast

class JavaScriptInterface {

    private val context : Context

    constructor(context : Context){
        this.context = context
    }

    @JavascriptInterface
    fun showToast(str : String){
        Toast.makeText(context, "Message Received From Java Script $str", Toast.LENGTH_SHORT).show()
    }
}

Usage

import android.webkit.WebView
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun WebViewCommunication(modifier: Modifier = Modifier) {
    Column(modifier = Modifier.fillMaxSize()) {
        AndroidView(factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true
                settings.loadWithOverviewMode = true
                settings.useWideViewPort = true
                settings.setSupportZoom(true)

                addJavascriptInterface(JavaScriptInterface(context), "AndroidFunction")
                loadUrl("file:///android_asset/my.html")
            }
        })
    }
}

TechQA.

How to get content from WebView in jetpack compose

There are 1 answers

Related Questions in WEBVIEW

Related Questions in ANDROID-JETPACK-COMPOSE

Related Questions in CONTENTEDITABLE

Popular Questions

Popular Tags

Trending Questions