Android WebView Java 與 JavaScript 互調實戰：addJavascriptInterface 與 loadUrl 回調

架構概覽

基於 Cordova/PhoneGap 的 DroidGap（或原生 WebView），通過 addJavascriptInterface 將 Java 對象暴露給 JS，JS 調用 Java；Java 通過 loadUrl("javascript:...") 執行 JS 函數。

Java 暴露對象給 JS

public class CzingLBWebMain extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        loadUrl("file:///android_asset/www/czingIndexHome.html");

        WebSettings ws = appView.getSettings();
        ws.setJavaScriptEnabled(true);
        ws.setAllowFileAccess(true);
        ws.setPluginState(WebSettings.PluginState.ON);

        // 關鍵：將 this 暴露為 JS 的 window.appDownloader
        appView.addJavascriptInterface(this, "appDownloader");
    }

    // JS 可直接調用的公共方法
    @JavascriptInterface // API 17+ 建議加註解
    public void callBackJava() {
        // 業務邏輯
    }
}

JS 調用 Java

// 在 czingIndexHome.html 引用的 JS 文件中
window.appDownloader.callBackJava();
// 帶參數調用
window.appDownloader.downloadFile("https://example.com/file.apk", "/sdcard/Download/");

Java 執行 JS 代碼（回調）

String resUrl = "aa";
String resId = "bb";
// 構造 JS 調用字符串，注意參數轉義
String callback = "javascript:callBackService('" + resUrl + "','" + resId + "')";
appView.loadUrl(callback);

JS 定義回調函數

function callBackService(url, id) {
    console.log("Java 回調:", url, id);
    // 更新 UI、觸發下一步流程
}

注意事項與最佳實踐

• 線程安全：addJavascriptInterface 方法在 WebView 核心線程（非 UI 線程）調用，若需操作 UI 必須 runOnUiThread。
• 參數類型：JS 傳遞基本類型自動轉換為 Java 基本類型/包裝類；複雜對象傳 JSON 字符串，Java 端用 Gson 解析。
• 安全性：僅暴露必要方法，API 17+ 必須加 @JavascriptInterface 註解，否則方法不可訪問。
• ProGuard 混淆：保留暴露類及其公共方法：-keepclassmembers class * { @android.webkit.JavascriptInterface ; }。
• loadUrl 執行時機：必須在頁面加載完成後（onPageFinished）調用，否則 JS 環境未就緒。

原生 WebView 等效代碼

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new MyJsBridge(), "bridge");
webView.setWebViewClient(new WebViewClient() {
    @Override public void onPageFinished(WebView view, String url) {
        view.loadUrl("javascript:initFromJava()");
    }
});
webView.loadUrl("file:///android_asset/www/index.html");