Android WebView JS 調用 Java：addJavascriptInterface 完整實現與安全最佳實踐

核心機制

WebView.addJavascriptInterface(Object, String) 將 Java 物件暴露給 JavaScript，JS 端可透過指定名稱呼叫 Java 方法。

完整實現步驟

1. 定義 Java 介面類

public class JsBridge {
    private Context context;
    
    public JsBridge(Context context) {
        this.context = context;
    }
    
    @JavascriptInterface  // API 17+ 必須加此註解，否則方法不可見
    public void shareToSocial(String title, String content, String url) {
        // 在主執行緒執行 UI 操作
        new Handler(Looper.getMainLooper()).post(() -> {
            Intent intent = new Intent(Intent.ACTION_SEND);
            intent.setType("text/plain");
            intent.putExtra(Intent.EXTRA_SUBJECT, title);
            intent.putExtra(Intent.EXTRA_TEXT, content + " " + url);
            context.startActivity(Intent.createChooser(intent, "分享到"));
        });
    }
    
    @JavascriptInterface
    public String getAppVersion() {
        try {
            return context.getPackageManager()
                .getPackageInfo(context.getPackageName(), 0).versionName;
        } catch (Exception e) {
            return "unknown";
        }
    }
}

2. WebView 配置與註冊

WebView webView = findViewById(R.id.webview);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);  // 必須啟用 JS
settings.setDomStorageEnabled(true);  // 支援 localStorage

// 註冊介面，JS 端透過 window.AndroidBridge 呼叫
webView.addJavascriptInterface(new JsBridge(this), "AndroidBridge");

// 載入頁面
webView.loadUrl("file:///android_asset/share.html");  // 或 https://...

3. HTML/JS 呼叫端

<button onclick="shareArticle()">分享</button>

<script>
function shareArticle() {
    var title = document.title;
    var content = "精彩文章推薦";
    var url = window.location.href;
    
    // 呼叫 Java 方法
    if (window.AndroidBridge) {
        window.AndroidBridge.shareToSocial(title, content, url);
    } else {
        alert("原生介面未就緒");
        // 降級：Web Share API 或複製連結
        if (navigator.share) {
            navigator.share({title, text: content, url});
        }
    }
}

// 獲取 App 版本
window.AndroidBridge.getAppVersion(function(version) {
    console.log("App 版本：" + version);
});

安全最佳實踐（必須遵守）

安全配置範例

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // 域名白名單檢查
        if (!isTrustedDomain(url)) {
            view.removeJavascriptInterface("AndroidBridge");
            view.removeJavascriptInterface("searchBoxJavaBridge_");  // 移除系統預設
        }
    }
});

private boolean isTrustedDomain(String url) {
    return url.startsWith("https://myapp.com/") || url.startsWith("file:///android_asset/");
}

社會化分享完整流程

1. JS 呼叫 AndroidBridge.shareToSocial(...)
2. Java 建立 ACTION_SEND Intent
3. 系統顯示分享選單 (微信、QQ、郵件、短信...)
4. 用戶選擇目標 App 完成分享

總結

Android WebView JS 調用 Java 核心是 addJavascriptInterface + @JavascriptInterface。**安全第一**：僅暴露必要業務方法、強制 HTTPS/白名單域名、移除系統預設介面、API 17+ 環境。社會化分享用 ACTION_SEND Intent 讓系統選單處理，最兼容、零 SDK 依賴。

1. 上一篇文章： IIS 發布網站報錯「未能寫入輸出文件，目錄名稱無效」完整排查指南
2. 下一篇文章： iOS App Store 審核狀態：「等待審核」vs「正在審核」差異與經驗分享

程式設計綜合問答

Android Socket 連線失敗不崩潰：捕獲 Throwable 並彈出 Toast 提示

Android 模擬器與 PC 進行 Socket 通訊時，

室內定位技術選型：使用 iBeacon 信號強度判斷用戶是否在同一房間

方案比較 技術精度成本部署複雜度適用場景 GPS10-50

iOS 依螢幕解析度動態調整 UIWebView 高度（無 Auto Layout 環境）

需求背景 使用 Storyboard 但需支援 iOS 5+

C++ 正則表達式提取日誌錯誤修正指南

問題現象 嘗試用 `std::regex` 從字串 2011