在现代移动应用开发中，混合应用（Hybrid App）模式越来越受欢迎，它允许开发者在原生应用中嵌入Web内容，并实现原生代码与Web前端（JavaScript）之间的无缝通信。Android WebView提供了一个强大的机制，使得Java代码能够调用JavaScript函数，反之亦然，从而实现复杂的数据交换和功能调用。本文将指导您如何在Android WebView中获取HTML元素数据并与Java进行交互。
1. 启用WebView的JavaScript支持
首先，确保您的WebView实例已启用JavaScript。这是进行任何JavaScript交互的前提。在您的Activity或Fragment中配置WebView时，请添加以下代码：
// 获取WebView实例，假设您在布局文件中有一个id为webView的WebView WebView webView = (WebView) findViewById(R.id.webView); // 获取WebSettings对象，用于配置WebView的各种设置 WebSettings webSettings = webView.getSettings(); // 启用JavaScript支持 webSettings.setJavaScriptEnabled(true);
2. 注入JavaScript接口到Android代码
为了让HTML页面中的JavaScript能够调用Android（Java）方法，我们需要向WebView注入一个Java对象作为JavaScript接口。这个接口在JavaScript环境中将以一个全局对象的形式存在。
// 创建一个JavaScriptInterface实例并注入到WebView // "MyAndroidInterface" 是JavaScript中将用来调用Java方法的全局对象名 webView.addJavascriptInterface(new JavaScriptInterface(this), "MyAndroidInterface");
这里的"MyAndroidInterface"是JavaScript代码中用来引用这个Java对象的名称。通过这个名称，JavaScript代码可以访问JavaScriptInterface类中被@JavascriptInterface注解标记的方法。
立即学习“Java免费学习笔记（深入）”；
3. 定义Java端的JavaScript接口类
创建一个Java类，该类将包含JavaScript可以调用的方法。这些方法必须使用@JavascriptInterface注解进行标记，以确保它们对JavaScript可见。为了更好地处理从JavaScript传递的复杂数据，建议使用JSON格式进行数据交换。
import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;
import android.os.Handler;
import android.os.Looper;
import org.json.JSONException;
import org.json.JSONObject;
public class JavaScriptInterface {
Context mContext;
// 构造函数，用于获取上下文
JavaScriptInterface(Context c) {
mContext = c;
}
/**
* JavaScript调用此方法向Android传递数据
* @param jsonStr 从JavaScript传递过来的JSON字符串
*/
@JavascriptInterface // 必须添加此注解，确保方法对JavaScript可见
public void receiveValueFromJs(String jsonStr) {
// 注意：此方法在非UI线程中执行。如果需要更新UI，请切换到主线程。
new Handler(Looper.getMainLooper()).post(() -> {
try {
JSONObject jsonObject = new JSONObject(jsonStr);
String userNameByName = jsonObject.optString("userNameByName", "未提供");
String userNameByClass = jsonObject.optString("userNameByClass", "未提供");
String message = "从JS接收到数据:\n" +
"通过 Name 获取: " + userNameByName + "\n" +
"通过 Class 获取: " + userNameByClass;
Toast.makeText(mContext, message, Toast.LENGTH_LONG).show();
// 在这里处理接收到的数据，例如更新UI、保存到数据库、执行业务逻辑等
} catch (JSONException e) {
Toast.makeText(mContext, "解析JS数据失败: " + e.getMessage(), Toast.LENGTH_LONG).show();
e.printStackTrace();
}
});
}
// 您可以根据需要添加其他供JavaScript调用的方法
// 例如：
// @JavascriptInterface
// public void showAndroidToast(String message) {
// new Handler(Looper.getMainLooper()).post(() ->
// Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show()
// );
// }
}注意事项：
- @JavascriptInterface注解在API Level 17及以上是强制性的，用于防止潜在的安全漏洞。
- receiveValueFromJs方法会在一个独立的线程中执行。如果需要在方法中执行任何UI操作（如显示Toast或更新视图），务必使用Handler或Activity.runOnUiThread()切换到主线程。
- 为了更好地组织和传递复杂数据，建议使用JSON格式进行数据交换，这在JavaScript和Java之间都很容易处理。
4. HTML页面中的JavaScript交互
在HTML页面中，您可以编写JavaScript代码来获取页面元素的数据，并通过之前注入的MyAndroidInterface对象将数据传递给Java。
以下是一个HTML示例，展示了如何获取不同方式（通过name和class）的输入框值，并将它们封装成JSON字符串传递给Android。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML交互示例</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"] { width: 80%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #0056b3; }
</style>
<script type="text/javascript">
function getDataFunction(){
// 1. 获取通过 'name' 属性定义的输入框的值 (与原始答案一致)
var valByName = '';
var inputByName = document.ipForm.userName; // 通过表单名和元素名获取
if (inputByName) {
valByName = inputByName.value;
}
// 2. 获取通过 'class' 属性定义的输入框的值 (响应原始问题)
var valByClass = '';
// 使用 querySelector 获取第一个匹配该CSS类的元素
var inputByClass = document.querySelector('.user-id-class');
// 或者使用 getElementsByClassName 获取所有匹配的元素（返回HTMLCollection），然后取第一个
// var inputByClass = document.getElementsByClassName('user-id-class')[0];
if (inputByClass) {
valByClass = inputByClass.value;
}
// 将获取到的数据封装成JSON对象
var dataToSend = {
userNameByName: valByName,
userNameByClass: valByClass
};
// 将JSON对象转换为字符串，并通过MyAndroidInterface调用Java方法
// 确保MyAndroidInterface对象在WebView中已成功注入
if (typeof MyAndroidInterface !== 'undefined' && MyAndroidInterface.receiveValueFromJs) {
MyAndroidInterface.receiveValueFromJs(JSON.stringify(dataToSend));
} else {
console.error("MyAndroidInterface 或其方法 receiveValueFromJs 未定义，无法与Android通信。");
alert("无法与Android通信！请检查Android接口是否正确注入。");
}
}
</script>
</head>
<body>
<h1>数据交互示例</h1>
<form name="ipForm" id="ipForm">
<label for="userNameInput">用户名 (通过 name):</label>
<input type="text" id="userNameInput" name="userName" value="张三"><br><br>
<label for="userIdInput">用户ID (通过 class):</label>
<input type="text" id="userIdInput" class="user-id-class" value="UID_001"><br><br>
<button type="button" onclick="getDataFunction();">提交数据到Android</button>
</form>
</body>
</html>关键点：
- document.ipForm.userName.value：通过表单的name属性和输入元素的name属性来获取值。
- document.querySelector('.user-id-class').value：通过CSS选择器获取第一个匹配class="user-id-class"的元素的值。如果您需要获取所有匹配的元素，可以使用document.querySelectorAll('.user-id-class')，它会返回一个NodeList，然后您可以遍历它。
- JSON.stringify(dataToSend)：将JavaScript对象转换为JSON字符串，这是跨语言传递复杂数据的标准方式。
- 在调用Java方法前，最好检查MyAndroidInterface对象是否存在以及其方法是否可用，以增强代码的健壮性。
5. 从Android调用JavaScript函数
除了JavaScript调用Java，Android也可以调用JavaScript函数。这通常用于在特定时机触发HTML页面的行为，例如加载完成后执行某个初始化函数，或者动态地向页面注入数据。
// 在WebView加载完页面后调用JavaScript函数 // 通常在WebViewClient
