Android WebView中JavaScript与Java数据交互指南-java教程-PHP中文网

Android WebView中JavaScript与Java数据交互指南

聖光之護

发布： 2025-09-20 22:51:01

原创

895人浏览过

android webview中javascript与java数据交互指南

本文详细介绍了如何在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的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()
    //     );
    // }
}

登录后复制

注意事项：

Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

查看详情

@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

登录后复制

以上就是Android WebView中JavaScript与Java数据交互指南的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Java与JavaScript中正则表达式的反斜杠转义差异解析 Java与JavaScript正则表达式：字符串字面量中反斜杠的转义处理 Android WebView中JavaScript与Java数据交互指南深入理解Chrome浏览器Flag：为何无法通过JavaScript编程修改 Java PBKDF2密钥派生到前端JavaScript的转换指南