WebView中Java與JavaScript的交互

原文首發於微信公眾號：jzman-blog，歡迎關注交流！

Android 開發過程中 WebView 的使用比較廣泛，常用來載入網頁，比如使用 WebView 載入新聞頁面、使用 WebView 打開本應用的鏈接以及用 WebView 顯示支付資訊頁面等，那麼如何 Android 開發中如何與 WebView 中的內容進行交互呢，這種交互主要就是 Java 與 JavaScript 之間的互相調用。下面實現一下如何響應 WebView 中圖片的點擊事件：

  1. 關鍵方法
  2. 具體實現
  3. 顯示效果

關鍵方法

1. setJavaScriptEnabled()

設置 WebView 是否支援 JavaScript 腳本，默認不支援。

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 對象的方法是有一定數量限制的。

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 腳本，如下：

//設置支援JavaScript  webSettings.setJavaScriptEnabled(true);
第二步：

創建與 JavaScrpt 通訊的類及供 JavaScript 調用的方法，如下：

/**   * 與 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對象並映射到JavaScript中  //參數(與JaveScript通訊的對象，映射到JavaScript中的對象)  webView.addJavascriptInterface(new AndroidInterface(this),"imageListener");
第五步：

在 JavaScript 中查找 標籤並在其點擊事件裡面調用其映射對象的方法打開顯示圖片的 Activity,如下：

<script type="text/javascript">  	function findImg(){  		//查找img標籤  		var imgs = document.getElementsByTagName("img");  		//遍歷img標籤  		for(var i=0; i<imgs.length; i++){  			//為每一個標籤設置點擊事件  			imgs[i].onclick = function(){  			 //imageListener映射的Java對象  			window.imageListener.showImage(this.src);  			}  		}  	}  </script>
第六步：

調用 JavaScript 裡面的方法，為保證調用時 Java 對象還未注入到 JavaScript 中，應該頁面載入完成時調用 javaScript 的方法，如下：

//設置 WebViewClient 監聽相關事件  webView.setWebViewClient(new WebViewClient(){      //頁面載入完成回調該方法      @Override      public void onPageFinished(WebView view, String url) {          super.onPageFinished(view, url);          //保證頁面載入完成後Java對象注入到JavaScript中          webView.loadUrl("javascript:findImg()");      }  });

顯示效果

在这里插入图片描述

源碼請參考：github

可以關注公眾號：jzman-blog，一起交流學習。

Tags:

VirMach 便宜 VPS