> 原文首發於微信公眾號：jzman-blog，歡迎關注交流！ Android 開發過程中 WebView 的使用比較廣泛，常用來載入網頁，比如使用 WebView 載入新聞頁面、使用 WebView 開啟本應用的連結以及用 WebView 顯示支付資訊頁面等，那麼如何 Android 開發中如何與 WebView 中的內容進行互動呢，這種互動主要就是 Java 與 JavaScript 之間的互相呼叫。下面實現一下如何響應 WebView 中圖片的點選事件： 1. 關鍵方法 2. 具體實現 3. 顯示效果 #### 關鍵方法 ##### 1. setJavaScriptEnabled() 設定 WebView 是否支援 JavaScript 指令碼，預設不支援。 ```java public abstract void setJavaScriptEnabled(boolean flag); ``` ##### 2. addJavascriptInterface() 注入 Java 物件到 WebView 中，該物件將會被注入到 JavaScript 主框架的上下文中，允許使用對映的 Java 物件的名稱從 JavaScript 訪問該物件的方法，且只可以訪問新增 @JavascriptInterface 註解的公共方法才可以從 JavaScript 中訪問，可在 API level 17 以上使用這樣使用。 如果 API level 16 以及更早的 API, 所有的公共方法(包括繼承的)都可以從 JavaScript 訪問，可能會出現頁面重新載入前，Java 物件還未注入到 JavaScript 中的情況，導致呼叫 Java 方法無效果。 *重要宣告*：該方法允許 JavaScript 控制應用程式，功能非常強大，但是如果 API level 16及更早的 API 版本將會存在一定的風險,比較安全的做法是該方法儘量在 Android 4.2 及以上版本使用該方法，如果是更低的版本 JavaScript 可以使用反射來訪問所注入物件的公共欄位，在 WebView 中使用該方法可能會有不受信任的內容被攻擊者利用，讓應用程式去執行 Java 程式碼，要注意執行緒安全,Java 物件的欄位不可訪問，Android 5.0 以上，所注入的 Java 物件的方法是有一定數量限制的。 ```java public void addJavascriptInterface(Object object, String name) {} ``` #### 具體實現 大致思路就是讓 WebView 中的圖片響應點選事件，然後呼叫 Android 介面來顯示被點選的圖片，實現步驟如下： 1. WebView 設定支援 JavaScript 指令碼； 2. 建立與 JavaScrpt 通訊的類及供 JavaScript 呼叫的方法； 3. 載入 WebView 中要顯示的內容； 4. 使用 addJavascriptInterface 方法將 Java 物件對映到 JavaScript 中； 5. 在 JavaScript 中呼叫對映物件的方法，開啟顯示圖片的 Activity; 6. 呼叫 javaScript 中的方法。 ##### 第一步： WebView 設定支援 JavaScript 指令碼，如下： ```java //設定支援JavaScript webSettings.setJavaScriptEnabled(true); ``` ##### 第二步： 建立與 JavaScrpt 通訊的類及供 JavaScript 呼叫的方法，如下： ```java /** * 與 javascript 通訊的 Java 物件，提供 javascript 呼叫的方法 * Created by jzman on 2017/7/20 0020. */ public class AndroidInterface { private Context context; public AndroidInterface(Context context) { this.context = context; } /** * 添加註解 @JavascriptInterface * javascript 要呼叫的方法 */ @JavascriptInterface public void showImage(String imgUrl){ Intent intent = new Intent(); intent.putExtra("img",imgUrl); intent.setClass(context,ImageActivity.class); context.startActivity(intent); } } ``` ##### 第三步： 載入 WebView 要顯示的內容，這裡載入 aasets 目錄下的 HTML 檔案，如下： ``` //載入 assets 目錄下的 HTML 檔案 webView.loadUrl("file:///android_asset/index.html"); ``` ##### 第四步： 使用 addJavascriptInterface 方法將 Java 物件對映到 JavaScript 中，如下： ```java //注入Java物件並對映到JavaScript中 //引數(與JaveScript通訊的物件，對映到JavaScript中的物件) webView.addJavascriptInterface(new AndroidInterface(this),"imageListener"); ``` ##### 第五步： 在 JavaScript 中查詢 標籤並在其點選事件裡面呼叫其對映物件的方法開啟顯示圖片的 Activity,如下： ```javascript ``` ##### 第六步： 呼叫 JavaScript 裡面的方法，為保證呼叫時 Java 物件還未注入到 JavaScript 中，應該頁面載入完成時呼叫 javaScript 的方法，如下： ```java //設定 WebViewClient 監聽相關事件 webView.setWebViewClient(new WebViewClient(){ //頁面載入完成回撥該方法 @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); //保證頁面載入完成後Java物件注入到JavaScript中 webView.loadUrl("javascript:findImg()"); } }); ``` #### 顯示效果  原始碼請參考：[github](https://github.com/jzmanu/WebViewDemo/tree/master) 可以關注公眾號：**jzman-blog**，一起交流學習。 ![](https://img2020.cnblogs.com/blog/758808/202004/758808-20200406211915887-753905