Android WebView 與 JavaScript 雙向通訊實作指南

原標題「Java I/O 流詳解」與內容不符，實際為 Android WebView 呼叫 Java 方法 以及 Java 呼叫 JavaScript 的完整雙向通訊範例。

架構概覽

• Java → JS：WebView.addJavascriptInterface(Object, "interfaceName") 註入 Java 物件，JS 透過 interfaceName.method() 呼叫。
• JS → Java：WebView.loadUrl("javascript:functionName()") 在 UI 執行緒注入並執行 JS 代碼。

1. Java 註入物件供 JS 呼叫

public class JsWebDemo extends Activity {
    private WebView wView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        wView = findViewById(R.id.wv1);
        WebSettings settings = wView.getSettings();
        settings.setJavaScriptEnabled(true); // 必須啟用 JS

        // 單一物件註入（僅暴露特定方法）
        wView.addJavascriptInterface(new ProxyBridge(), "AliansBridge");

        // 或註入整個 Activity（暴露所有 public 方法，風險較高）
        // wView.addJavascriptInterface(this, "AliansBridge");

        wView.loadUrl("file:///android_asset/index.html");
    }

    private class ProxyBridge {
        @JavascriptInterface // API 17+ 必須加註解才允許被 JS 呼叫
        public int one() { return 1; }
    }
}

2. HTML/JS 呼叫 Java 方法

<html>
<script>
    function callJava() {
        // 呼叫 Java 方法並取得回傳值
        var result = AliansBridge.one();
        document.getElementById('output').innerHTML = result;
    }
</script>
<body>
    <input type="button" value="呼叫 Java" onclick="callJava()" />
    <div id="output">Test page</div>
</body>
</html>

3. Java 主動呼叫 JavaScript

// 必須在 UI 執行緒執行 loadUrl
mHandler.post(() -> mWebView.loadUrl("javascript:wave()"));

// 完整範例：JS 呼叫 Java，Java 再回呼 JS
mWebView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void clickOnAndroid() {
        mHandler.post(() -> mWebView.loadUrl("javascript:wave()"));
    }
}, "demo");

4. 處理 JS alert/confirm/prompt

mWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        // 自訂對話框或直接確認
        result.confirm();
        return true; // 表示已處理
    }
});

安全性與效能注意事項

• @JavascriptInterface：API 17 (Android 4.2) 起強制要求，未加註解的 public 方法將無法被 JS 存取，防止反射攻擊。
• 最小權限原則：僅註入專用 Bridge 類別，避免註入整個 Activity/Context。
• 混淆保護：ProGuard/R8 需保留 Bridge 類別與方法名稱：-keepclassmembers class * { @android.webkit.JavascriptInterface public *; }。
• 執行緒：loadUrl("javascript:...") 必須在主執行緒；JS 呼叫 Java 時運行於 WebView 核心執行緒（非 UI 執行緒），若需更新 UI 必須切回主執行緒。