我有可编辑的网络视图。我正在使用 webview 作为富文本编辑器。 WebViewClient 作为 AccompanistWebViewClient。
在 onPageFinished 上我将 css 注入到 webview
view?.evaluateJavascript(js, null)但是如何从 webview 返回内容呢？ 我想从我的 ViewModel 类中检索 webview 内容
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
}
)
这是一个如何在 Jetpack Compose 中使用 Webview 与 Android 系统通信的简单示例。
这里我们获取了一个示例 HTML 文件和一个简单的 JavaScript 函数。
之后创建一个处理 JavaScript 并对其进行操作的接口。
使用 JavaScript 的示例 HTML 文件
<!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>
制作一个处理 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()
}
}
用法
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")
}
})
}
}