原文首發(fā)于微信公眾號(hào)：jzman-blog，歡迎關(guān)注交流！

Android 開發(fā)過程中 WebView 的使用比較廣泛，常用來加載網(wǎng)頁，比如使用 WebView 加載新聞頁面、使用 WebView 打開本應(yīng)用的鏈接以及用 WebView 顯示支付信息頁面等，那么如何 Android 開發(fā)中如何與 WebView 中的內(nèi)容進(jìn)行交互呢，這種交互主要就是 Java 與 JavaScript 之間的互相調(diào)用。下面實(shí)現(xiàn)一下如何響應(yīng) WebView 中圖片的點(diǎn)擊事件：

1. 關(guān)鍵方法
2. 具體實(shí)現(xiàn)
3. 顯示效果

關(guān)鍵方法

1. setJavaScriptEnabled()

設(shè)置 WebView 是否支持 JavaScript 腳本，默認(rèn)不支持。

public abstract void setJavaScriptEnabled(boolean flag);

2. addJavascriptInterface()

注入 Java 對象到 WebView 中，該對象將會(huì)被注入到 JavaScript 主框架的上下文中，允許使用映射的 Java 對象的名稱從 JavaScript 訪問該對象的方法，且只可以訪問添加 @JavascriptInterface 注解的公共方法才可以從 JavaScript 中訪問，可在 API level 17 以上使用這樣使用。

如果 API level 16 以及更早的 API, 所有的公共方法(包括繼承的)都可以從 JavaScript 訪問，可能會(huì)出現(xiàn)頁面重新加載前，Java 對象還未注入到 JavaScript 中的情況，導(dǎo)致調(diào)用 Java 方法無效果。

重要聲明：該方法允許 JavaScript 控制應(yīng)用程序，功能非常強(qiáng)大，但是如果 API level 16及更早的 API 版本將會(huì)存在一定的風(fēng)險(xiǎn),比較安全的做法是該方法盡量在 Android 4.2 及以上版本使用該方法，如果是更低的版本 JavaScript 可以使用反射來訪問所注入對象的公共字段，在 WebView 中使用該方法可能會(huì)有不受信任的內(nèi)容被攻擊者利用，讓應(yīng)用程序去執(zhí)行 Java 代碼，要注意線程安全,Java 對象的字段不可訪問，Android 5.0 以上，所注入的 Java 對象的方法是有一定數(shù)量限制的。

public void addJavascriptInterface(Object object, String name) {}

具體實(shí)現(xiàn)

大致思路就是讓 WebView 中的圖片響應(yīng)點(diǎn)擊事件，然后調(diào)用 Android 界面來顯示被點(diǎn)擊的圖片，實(shí)現(xiàn)步驟如下：

1. WebView 設(shè)置支持 JavaScript 腳本；
2. 創(chuàng)建與 JavaScrpt 通信的類及供 JavaScript 調(diào)用的方法；
3. 加載 WebView 中要顯示的內(nèi)容；
4. 使用 addJavascriptInterface 方法將 Java 對象映射到 JavaScript 中；
5. 在 JavaScript 中調(diào)用映射對象的方法，打開顯示圖片的 Activity;
6. 調(diào)用 javaScript 中的方法。

第一步：

WebView 設(shè)置支持 JavaScript 腳本，如下：

//設(shè)置支持JavaScript

webSettings.setJavaScriptEnabled(true);

第二步：

創(chuàng)建與 JavaScrpt 通信的類及供 JavaScript 調(diào)用的方法，如下：

/**

 * 與 javascript 通信的 Java 對象，提供 javascript 調(diào)用的方法

 * Created by jzman on 2017/7/20 0020.

 */

public class AndroidInterface {

    private Context context;

    public AndroidInterface(Context context) {

        this.context = context;

    }

    /**

     * 添加注解 @JavascriptInterface

     * javascript 要調(diào)用的方法

     */

    @JavascriptInterface

    public void showImage(String imgUrl){

        Intent intent = new Intent();

        intent.putExtra("img",imgUrl);

        intent.setClass(context,ImageActivity.class);

        context.startActivity(intent);

    }

}

第三步：

加載 WebView 要顯示的內(nèi)容，這里加載 aasets 目錄下的 HTML 文件，如下：

//加載 assets 目錄下的 HTML 文件

webView.loadUrl("file:///android_asset/index.html");

第四步：

使用 addJavascriptInterface 方法將 Java 對象映射到 JavaScript 中，如下：

//注入Java對象并映射到JavaScript中

//參數(shù)(與JaveScript通信的對象，映射到JavaScript中的對象)

webView.addJavascriptInterface(new AndroidInterface(this),"imageListener");

第五步：

在 JavaScript 中查找 標(biāo)簽并在其點(diǎn)擊事件里面調(diào)用其映射對象的方法打開顯示圖片的 Activity,如下：

<script type="text/javascript">

	function findImg(){

		//查找img標(biāo)簽

		var imgs = document.getElementsByTagName("img");

		//遍歷img標(biāo)簽

		for(var i=0; i<imgs.length; i++){

			//為每一個(gè)標(biāo)簽設(shè)置點(diǎn)擊事件

			imgs[i].onclick = function(){

			 //imageListener映射的Java對象

			window.imageListener.showImage(this.src);

			}

		}

	}

</script>

第六步：

調(diào)用 JavaScript 里面的方法，為保證調(diào)用時(shí) Java 對象還未注入到 JavaScript 中，應(yīng)該頁面加載完成時(shí)調(diào)用 javaScript 的方法，如下：

//設(shè)置 WebViewClient 監(jiān)聽相關(guān)事件

webView.setWebViewClient(new WebViewClient(){

    //頁面加載完成回調(diào)該方法

    @Override

    public void onPageFinished(WebView view, String url) {

        super.onPageFinished(view, url);

        //保證頁面加載完成后Java對象注入到JavaScript中

        webView.loadUrl("javascript:findImg()");

    }

});

顯示效果

源碼請參考：github

可以關(guān)注公眾號(hào)：jzman-blog，一起交流學(xué)習(xí)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。