android 与 js 交互

在移动应用开发中，Android 和 JavaScript 之间的交互是常见的需求，尤其在混合应用开发中更为重要。Android 使用Java或Kotlin作为主要编程语言，而Web前端通常使用JavaScript，两者之间的通信能够实现丰富的功能，比如更新UI、获取用户数据或者利用Web服务。本文将详细讲解Android与JavaScript交互的机制和实践方法。 ### 一、WebView组件 Android中的`WebView`是实现Android与JavaScript交互的基础。`WebView`是一个可以加载和显示网页内容的视图，它不仅能够渲染HTML，还支持通过JavaScript与原生代码进行通信。 #### 1. 加载网页 在Android中，我们可以通过以下方式加载一个网页： ```java WebView webView = (WebView) findViewById(R.id.webView); webView.loadUrl("file:///android_asset/index.html"); ``` #### 2. 启用JavaScript 为了使`WebView`支持JavaScript，需要开启JavaScript执行权限： ```java WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); ``` ### 二、JavaScriptInterface `JavaScriptInterface` 是Android提供的一种机制，允许JavaScript调用Android的原生方法。定义一个注解`@JavascriptInterface`的类，并在`WebView`中注册，即可实现JS到Android的调用。 ```java public class MyJavaScriptInterface { @JavascriptInterface public void showToast(String message) { Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show(); } } // 注册接口 webView.addJavascriptInterface(new MyJavaScriptInterface(), "android"); ``` JavaScript中可以这样调用： ```javascript window.android.showToast('Hello from JavaScript!'); ``` ### 三、WebViewClient与WebChromeClient #### 1. WebViewClient `WebViewClient`用于处理页面加载事件，如页面开始加载、加载完成等。我们可以在其中添加回调来监听JavaScript的执行结果： ```java webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 在页面加载完成后执行JavaScript webView.loadUrl("javascript:window.android.someFunction()"); } }); ``` #### 2. WebChromeClient `WebChromeClient`主要用于处理与UI相关的交互，如进度条、对话框等。还可以监听JavaScript的alert、confirm和prompt。 ```java webView.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, result); } @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { return super.onJsConfirm(view, url, message, result); } @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { return super.onJsPrompt(view, url, message, defaultValue, result); } }); ``` ### 四、Android调用JavaScript 除了`addJavascriptInterface`，Android还可以通过`loadUrl`方法直接执行JavaScript代码： ```java webView.loadUrl("javascript:yourJavaScriptFunction()"); ``` ### 五、安全注意事项 - 为了安全，`@JavascriptInterface`注解的方法不能访问Android敏感API，避免被恶意JavaScript攻击。 - 在Android 4.2及以上版本，不加`@JavascriptInterface`注解的方法将无法在JavaScript中调用，防止跨域注入攻击。 总结，Android与JavaScript的交互是混合应用开发的关键，通过`WebView`、`JavaScriptInterface`、`WebViewClient`和`WebChromeClient`等工具，可以实现两者之间的双向通信，构建出功能丰富的应用。开发者应当根据实际需求灵活运用这些技术，同时注意安全问题。