在Android WebView中如何将Java变量传递给JavaScript？

首先确保你已经对WebView做了基础配置，开启JS权限：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// 避免页面跳转时打开系统浏览器
webView.setWebViewClient(new WebViewClient());

以下是三种最常用的实现方式，按需选择即可：

方法1：loadUrl() 拼接参数执行JS（全版本兼容） #

适合基础类型变量传递，也是最容易上手的方案，Android所有系统版本都支持。

实现步骤 #

1. 先在你的index.html中提前定义好接收变量的JS方法或者全局变量：

// index.html 中的JS代码
function getValueFromJava(value) {
  console.log("拿到Java传递的变量：" + value);
  // 这里可以做你的业务逻辑，把值赋值给页面元素之类的
}
// 也可以直接定义全局变量接收
let globalJavaVar;

2. 在Java中需要传递变量的地方，调用loadUrl执行对应的JS代码即可，注意字符串要做转义避免JS语法错误：

// Java代码中的变量
String userNickname = "Android新手开发者";
int userAge = 20;

// 调用JS方法传递参数
webView.loadUrl("javascript:getValueFromJava('" + userNickname.replace("'", "\\'") + "')");
// 直接给JS全局变量赋值
webView.loadUrl("javascript:globalJavaVar = " + userAge);

注意事项 #

• 传递变量的操作必须放在WebView加载完页面之后执行，否则JS还没初始化会报错，推荐放在onPageFinished回调中执行：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 页面加载完成后再执行传值操作
        String userNickname = "Android新手开发者";
        webView.loadUrl("javascript:getValueFromJava('" + userNickname.replace("'", "\\'") + "')");
    }
});

• 该方法执行后无法直接获取JS的返回结果，仅适合单向传值场景

方法2：evaluateJavascript() 异步传值（推荐Android 4.4+使用） #

性能比loadUrl更高，支持获取JS执行的返回结果，目前市面上绝大多数应用的最低兼容版本都在API 19以上，优先选这个方案。

实现代码 #

String userNickname = "Android新手开发者";
webView.evaluateJavascript("getValueFromJava('" + userNickname.replace("'", "\\'") + "')", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String result) {
        // result是JS方法执行后的返回值，格式为JSON字符串，比如JS返回字符串"ok"，这里拿到的是"\"ok\""，需要自行解析
    }
});

注意事项 #

• 执行过程是异步的，不会阻塞主线程
• 仅支持Android 4.4（API 19）及以上系统

方法3：JavascriptInterface 映射Java对象（适合频繁交互场景） #

如果Java和JS需要频繁互相调用，用这个方案更高效，直接把Java对象映射到JS的全局作用域，JS可以随时主动读取Java的变量或者调用Java方法。

实现步骤 #

1. 首先自定义Java交互接口类，要暴露给JS的方法必须添加@JavascriptInterface注解：

public class AndroidJsInterface {
    // 可以直接定义公共属性传递变量
    public String publicData = "直接暴露的公共变量";

    @JavascriptInterface
    public String getDynamicData() {
        // 这里可以返回动态生成的变量
        return "Java侧动态生成的内容：" + System.currentTimeMillis();
    }
}

2. 给WebView添加接口映射，第二个参数就是JS中可以直接调用的全局对象名：

webView.addJavascriptInterface(new AndroidJsInterface(), "androidInterface");

3. JS中直接调用该对象的属性或者方法即可拿到变量，不需要Java主动触发：

// index.html中的JS代码
// 直接读取公共属性
let staticData = androidInterface.publicData;
// 调用方法获取动态值
let dynamicData = androidInterface.getDynamicData();
console.log(staticData, dynamicData);

注意事项 #

• 仅加载你自己本地的可信HTML页面时使用该方案，加载外部不可信网页时使用有安全风险
• 接口方法的执行线程是Java的子线程，不要在方法中直接操作UI

通用避坑提示 #

• 传递包含特殊字符（单引号、双引号、换行符、emoji）的字符串时，建议先把内容转为JSON格式再传递，避免出现JS语法错误
• 所有WebView的操作都必须在Android主线程执行，否则会抛出异常
• 本地assets目录下的index.html加载路径为file:///android_asset/index.html，不要写错路径

内容的提问来源于stack exchange，提问作者Anandakrishnan