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，一塊兒交流學習。