Android 之 WebView与HTML交互
一、Android 原生代码（Java/Kotlin）
// MainActivity.java
public class MainActivity extends AppCompatActivity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);webView = findViewById(R.id.webView);WebSettings webSettings = webView.getSettings();webSettings.setJavaScriptEnabled(true); // 启用JS支持 [3,5](@ref)webSettings.setDomStorageEnabled(true); // 启用DOM存储// 注册JS接口（安全关键：限制暴露方法）webView.addJavascriptInterface(new JsBridge(this), "AndroidBridge"); // "AndroidBridge" 是JS中调用的对象名 [1,4](@ref)// 设置WebViewClient监听页面加载webView.setWebViewClient(new WebViewClient() {@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);// 页面加载完成后调用JS函数callJavaScriptFunction("onNativeReady()");}});// 加载本地HTML（位于assets目录）webView.loadUrl("file:///android_asset/index.html");}// 原生调用JS方法（兼容Android 4.4+）private void callJavaScriptFunction(String jsCode) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {webView.evaluateJavascript(jsCode, null); // 高效无返回值调用 [6](@ref)} else {webView.loadUrl("javascript:" + jsCode); // 低版本兼容 [5](@ref)}}// 自定义JS桥接类（必须用@JavascriptInterface标记暴露的方法）public static class JsBridge {private Context context;public JsBridge(Context context) {this.context = context;}@JavascriptInterfacepublic void showToast(String message) {// 原生功能：显示ToastToast.makeText(context, message, Toast.LENGTH_SHORT).show();}@JavascriptInterfacepublic String getDeviceModel() {// 返回设备型号给JSreturn Build.MODEL;}}// 避免内存泄漏@Overrideprotected void onDestroy() {webView.destroy();super.onDestroy();}
}二、HTML/JavaScript 代码（assets/index.html）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>WebView交互示例</title><script>// 供原生调用的JS函数function onNativeReady() {document.getElementById("status").innerText = "页面加载完成！";}// JS调用原生方法（显示Toast）function callNativeToast() {AndroidBridge.showToast("Hello from JavaScript!"); // 通过AndroidBridge对象调用 [4](@ref)}// JS获取原生数据function getDeviceInfo() {const model = AndroidBridge.getDeviceModel();document.getElementById("deviceInfo").innerText = `设备型号: ${model}`;}</script>
</head>
<body><h1>WebView交互演示</h1><p id="status">加载中...</p><button onclick="callNativeToast()">调用原生Toast</button><button onclick="getDeviceInfo()">获取设备信息</button><p id="deviceInfo"></p>
</body>
</html>所有暴露给 JS 的方法必须添加 @JavascriptInterface 注解，防止未授权访问