本文详细介绍了如何在Android WebView中实现JavaScript与Java的双向数据交互。通过配置WebView设置、注入JavaScript接口，以及在HTML和Java代码中定义相应的方法，开发者可以轻松地从HTML页面获取数据并传递给Android应用，反之亦然，从而实现丰富的混合应用功能。
在现代移动应用开发中，混合应用（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的WebViewWebView 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格式进行数据交换。
Swapface人脸交换
一款创建逼真人脸交换的AI换脸工具
45 查看详情 
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。
HTML交互示例 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; } 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接口是否正确注入。"); } }数据交互示例
关键点：
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
以上就是Android WebView中JavaScript与Java数据交互指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/327898.html
微信扫一扫 
支付宝扫一扫 
