摘要：下面實(shí)現(xiàn)一下如何響應(yīng)中圖片的點(diǎn)擊事件關(guān)鍵方法具體實(shí)現(xiàn)顯示效果關(guān)鍵方法設(shè)置是否支持腳本，默認(rèn)不支持。如果以及更早的所有的公共方法包括繼承的都可以從訪問，可能會(huì)出現(xiàn)頁(yè)面重新加載前，對(duì)象還未注入到中的情況，導(dǎo)致調(diào)用方法無(wú)效果。

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

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

關(guān)鍵方法

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

顯示效果

1. setJavaScriptEnabled()

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

public abstract void setJavaScriptEnabled(boolean flag);

2. addJavascriptInterface()

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

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

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

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

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

WebView 設(shè)置支持 JavaScript 腳本；

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

加載 WebView 中要顯示的內(nèi)容；

使用 addJavascriptInterface 方法將 Java 對(duì)象映射到 JavaScript 中；

在 JavaScript 中調(diào)用映射對(duì)象的方法，打開顯示圖片的 Activity;

調(diào)用 javaScript 中的方法。

第一步：

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

//設(shè)置支持JavaScript
webSettings.setJavaScriptEnabled(true);

第二步：

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

/**
 * 與 javascript 通信的 Java 對(duì)象，提供 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 對(duì)象映射到 JavaScript 中，如下：

//注入Java對(duì)象并映射到JavaScript中
//參數(shù)(與JaveScript通信的對(duì)象，映射到JavaScript中的對(duì)象)
webView.addJavascriptInterface(new AndroidInterface(this),"imageListener");

第五步：

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

第六步：

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

//設(shè)置 WebViewClient 監(jiān)聽相關(guān)事件
webView.setWebViewClient(new WebViewClient(){
    //頁(yè)面加載完成回調(diào)該方法
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        //保證頁(yè)面加載完成后Java對(duì)象注入到JavaScript中
        webView.loadUrl("javascript:findImg()");
    }
});

源碼請(qǐng)參考：github

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