Android App 嵌入 H5/JSP 頁面：WebView 完整接入與 JS 交互指南

核心組件：WebView

Android 提供 WebView 控件，可直接加載 HTTP/HTTPS URL、本地 HTML/JS/CSS、Data URLs，**實現 App 內嵌網頁**。

基礎接入代碼

// 布局
<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" />

// Activity
WebView webView = findViewById(R.id.webview);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);        // 必須開啟 JS 支持
settings.setDomStorageEnabled(true);        // LocalStorage/SessionStorage
settings.setAllowFileAccess(true);          // 文件訪問
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); // HTTPS 頁面加載 HTTP 資源

webView.setWebViewClient(new WebViewClient() {
    @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl(request.getUrl().toString());
        return true;
    }
});

webView.loadUrl("https://example.com/page.jsp"); // 或 file:///android_asset/local.html

JS ↔ Android 雙向交互（關鍵進階）

1. Android 調用 JS：

   
   webView.evaluateJavascript("javascript:updateUI('" + msg + "')", value -> { /* callback */ });
   // API 19+ 推薦，異步帶回調
   

2. JS 調用 Android：

   
   // Android 暴露接口
   class JsBridge {
       @JavascriptInterface
       public void onAction(String param) { /* 業務邏輯 */ }
   }
   webView.addJavascriptInterface(new JsBridge(), "AndroidBridge"); // JS 端 window.AndroidBridge.onAction(...)
   

   ⚠️ 安全警告：addJavascriptInterface 在 API 17 以下存在遠程代碼執行漏洞，**僅在可信內容/自有域名頁面使用**，生產環境建議配合 WebViewClient.onReceivedError、CSP、域名白名單防護。

常見場景與最佳實踐

性能與體驗優化

• 硬件加速：webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)（API 11+）。
• 預加載/緩存：settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK)。
• 進度條/錯誤頁：WebChromeClient.onProgressChanged、WebViewClient.onReceivedError 友好提示。
• 內存管理：onDestroy() 中 webView.destroy()、移除回調、清理緩存。

WebView 是 Android 混合開發基石，**「業務變動快 → H5、體驗關鍵 → 原生、能力互補 → JS Bridge」** 是成熟架構選型邏輯。