qian
Android WebView 是一個讓使用者可以在 Android 應用程式中瀏覽網頁的元件。它基於 Chromium 的內核，因此能夠支援最新的網頁標準與特性。WebView 可以獨立使用，也可以作為更大規模應用的組件之一。在某些情況下，你可能需要從 JavaScript (JS) 中呼叫 Android 原生代碼（反之亦然）來實現更豐富的功能體驗。以下將詳細解釋如何透過 JavaScript Interface 在 Android WebView 上動態新增 JavaScript 功能。
1. 什麼是 Android WebView？
Android WebView 是 Android SDK 的一部分，允許你在 Android 應用程式中嵌入互聯網內容。它可以被視為一個小型瀏覽器，但它是作為你的應用程式的一部分運行的。這意味著你可以控制 WebView 的行為並監聽其事件。
2. WebView 和 JS 交互的重要性
在許多情境中，你需要讓 WebView 中的網頁內容與應用程式的其他部分進行溝通，或者直接與用戶端（例如裝置上的資料庫或服務）進行互動。這種交互通常需要通過 JavaScript 介面（JavaScript interface）來完成。
3. 設定 WebView 以支持 JavaScript
在使用 WebView 之前，你需要在你的 Android 專案中引入對 WebView 的支援，並且確保已經正確地配置了你的應用程式以支持 JavaScript。以下是一些關鍵步驟：
- 在 `AndroidManifest.xml` 中授予必要的權限，例如 Internet 權限。
- 在你的 Activity 或是 Fragment 中初始化 WebView。
- 啟用 WebView 對 JavaScript 的支持。
// 初始化 WebView
webView = findViewById(R.id.my_webview);
// 啟用 JavaScript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
4. 建立 JavaScript 接口
要使 WebView 能夠與你的 Java/Kotlin 代碼進行通信，你需要創建一個 JavaScript 接口類別。這個類別會被轉換成 JavaScript Object Notation (JSON) 格式，然後加載到 WebView 中。這樣，當網頁中的 JavaScript 調用該接口時，就可以觸發原生方法。
public class MyJavaScriptInterface {
@JavascriptInterface // 這是必要的方法標記
public void showToast(String message) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
}
}
注意：如果你使用的是 API Level 24 及以上，則需要在 `AndroidManifest.xml` 中註明以下屬性，因為自 Android Nougat 起，系統限制了未顯式聲明的遠端 JavaScript 橋接的使用。
<manifest>
<!-- 針對 Android O+ -->
<uses-permission android:name="android.permission.BIND_JOB_SERVICE" />
<!-- 針對所有版本 -->
<application
android:supportsRtl="true"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTop"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<meta-data
android:name="android.webkit.WebView.EnableSafeBrowsing"
android:value="true"/>
<meta-data
android:name="android.webkit.WebView.MixedContentMode"
android:value="SECURE_OR_DEFAULT"/>
<provider
android:authorities="${applicationId}.fileProvider"
android:exported="false"
android:grantUriPermissions="true"
android:name="androidx.core.content.FileProvider">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths"></meta-data>
</provider>
<activity
android:name="com.google.androidbrowserhelper.FirstRunHelper"
tools:node="remove">
<intent-filter tools:ignore="ExactTextLengthInQuery">
<action android:name="com.google.androidbrowserhelper.trusted.LaunchUrl" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
</application>
</manifest>
5. 在 WebView 中加載 JavaScript 界面
一旦你有了 JavaScript 接口類別，你需要將其實例附加到 WebView 中。這通常是在 WebView 正在加載網頁後執行。
webView.loadUrl("https://example.com/"); // 假設這裡是你要加載的 URL
webView.addJavascriptInterface(new MyJavaScriptInterface(this), "Android");
在上面的代碼片段中，`MyJavaScriptInterface` 類的實例被命名為 `Android`，這意味著任何來自網頁中 JavaScript 的對 `Android` 名稱空間下的函數的呼叫都將會映射到相應的 Java 函數上。
6. 從 JavaScript 調用 Java 代碼
在網頁層面上，你可以使用 `javascript:` 語法來呼叫已附加到 WebView 的 JavaScript 介面。這通常是透過 HTML 元素的事件處理程序完成的。
<button onclick="callAndroidFunction()">點擊我！</button>
function callAndroidFunction() {
if (window.Android) { // 檢查是否已經連線到 Android 介面
Android.showToast('Hello from JavaScript!'); // 呼叫 Android 函數
} else {
console.error('No Android interface found.');
}
}
7. 安全性考慮
請務必注意，向 WebView 公開的 JavaScript 接口可能存在安全風險。始終只在你知道且信任的網站上使用此功能，並且只共享最小範圍內的敏感信息。此外，最好遵循最佳實踐來保護你的應用程式免受潛在攻擊，例如避免在 JavaScript 介面中暴露敏感數據或操作。
總結來說，Android WebView 與 JavaScript 的互動是透過 JavaScript 介面來實現的。開發者必須先準備好 JavaScript 介面類別，然後將其實例附加到 WebView，最後從網頁的 JavaScript 代碼中呼叫這些函數即可。這整個過程需要適當地配置 Android 應用程式以及遵守 Android 平臺的安全指南。
