如何通过JavascriptInterface在Android WebView中回传二维码扫描结果

核心思路 #

通过onActivityResult接收扫码Intent的返回数据，再通过JavascriptInterface调用JS回调或直接执行JS代码两种方式，把结果传递给WebView中的JS逻辑。

步骤1：处理扫码Intent的返回结果 #

在你的WebView Activity中重写onActivityResult方法，捕获扫码完成后的返回数据（以下示例假设使用ZXing扫码库，返回字段为SCAN_RESULT，可根据实际扫码工具调整）：

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    // 匹配扫码请求的请求码（这里用100作为示例）
    if (requestCode == 100 && resultCode == RESULT_OK) {
        // 获取扫码结果文本
        String scanResult = data.getStringExtra("SCAN_RESULT");
        // 调用后续逻辑传递结果到WebView
        passResultToWebView(scanResult);
    }
}

步骤2：将结果传递到WebView #

提供两种实用方案，按需选择：

方案一：通过JavascriptInterface调用JS回调

适合需要动态传递回调函数的场景，灵活性更高。

1. 修改JavascriptInterface类，添加回调保存与结果传递逻辑：

public class WebAppInterface {
    private Context mContext;
    private WebView mWebView;
    private String scanCallbackFunc; // 保存JS传入的回调函数名

    public WebAppInterface(Context context, WebView webView) {
        mContext = context;
        mWebView = webView;
    }

    // JS调用此方法触发扫码，同时传入回调函数名
    @JavascriptInterface
    public void scan(String callback) {
        this.scanCallbackFunc = callback;
        // 启动扫码Intent（示例用ZXing的CaptureActivity）
        Intent scanIntent = new Intent(mContext, CaptureActivity.class);
        scanIntent.putExtra("SCAN_MODE", "QR_CODE_MODE");
        ((Activity) mContext).startActivityForResult(scanIntent, 100);
    }

    // 供Activity调用，传递扫码结果到JS
    public void sendScanResult(String result) {
        if (scanCallbackFunc == null) return;
        // 转义特殊字符，避免JS语法错误
        String escapedResult = result.replace("'", "\\'").replace("\n", "\\n");
        // 在WebView线程执行JS回调
        mWebView.post(() -> {
            mWebView.evaluateJavascript("javascript:" + scanCallbackFunc + "('" + escapedResult + "')", null);
            scanCallbackFunc = null; // 清空回调，防止重复调用
        });
    }
}

2. 在Activity中关联传递逻辑：
   在onActivityResult的passResultToWebView方法中调用：

private void passResultToWebView(String result) {
    mWebAppInterface.sendScanResult(result);
}

3. JS端调用示例：

// 触发扫码，并定义结果回调
function startScan() {
    Android.scan(function(scanResult) {
        // 处理扫码结果
        console.log("扫码结果：", scanResult);
        document.getElementById("result-display").textContent = scanResult;
    });
}

方案二：直接执行JS处理函数

适合固定结果处理逻辑的场景，代码更简洁。

1. 在Activity的passResultToWebView中直接执行JS：

private void passResultToWebView(String result) {
    String escapedResult = result.replace("'", "\\'").replace("\n", "\\n");
    mWebView.post(() -> {
        // 直接调用JS中预定义的处理函数
        mWebView.evaluateJavascript("javascript:handleScanResult('" + escapedResult + "')", null);
    });
}

2. JS端定义处理函数：

// 接收扫码结果的处理函数
function handleScanResult(result) {
    console.log("扫码结果：", result);
    // 后续业务逻辑
}

注意事项 #

• 确保WebView开启JS支持：webSettings.setJavaScriptEnabled(true);
• 正确注入JavascriptInterface：webView.addJavascriptInterface(new WebAppInterface(this, webView), "Android");
• 若扫码结果包含特殊字符（如单引号、换行），必须做转义处理，否则会导致JS语法错误。

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