原文首發于微信公眾號：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，一起交流學習。

總結

以上是生活随笔為你收集整理的WebView中Java与JavaScript的交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。