在现代移动应用开发中，混合应用（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注解标记的方法。
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();
}
});
}
// 您可以根据需要添加其他供Java
Script调用的方法
// 例如：
// @JavascriptInterface
// public void showAndroidToast(String message) {
// new Handler(Looper.getMainLooper()).post(() ->
// Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show()
// );
// }
}
Script调用的方法
// 例如：
// @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。
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
