AndroidWebView與JavaScript程式碼互動

1. 首先先準備一段網頁程式碼

  String DATA = "<p>    為加快推進2017年度自治區水土保持重點工程前期工作，按照水利廳《關於做好2017年度水土保持重點工程專案前期工作的通知》要求，2017年4月27日，水利廳水保處一行三人在趙巨集新副處長的帶領下。對昌吉州2017年度水土保持重點工程前期工作開展情況進行了監督檢查。 <br>
"
      + "    首先，檢查組一行對瑪納斯縣旱卡子灘哈薩克鄉閩瑪生態村進行了實地調研，該村是全疆第一個以“綠色、生態、宜居”為設計理念而高標準建設的牧民定居工程，工程建設與當地自然景觀相協調，基本實現人與自然的和諧共處，經濟社會的可持續發展，生態環境的良性迴圈。“十二五”期間，水利廳在該區域已安排了兩期水土保持綜合治理工程建設，治理水土流失面積14平方公里，蓄水保土效益、生態效益和社會效益顯著。 <br>
"
      + "    隨後，檢查組對擬選定列入2017年水土保持重點工程建設計劃中的瑪納斯縣沙河小流域水土保持綜合治理工程專案區進行了現場檢視，詳細瞭解了專案實施方案的編報、審查和審批工作情況，及專案區選址、建設規模及投資等情況，實施方案編制單位專案負責人員在現場詳細介紹了工程實施方案的設計情況，聽取了昌吉州水利局和瑪納斯縣水利局有關負責同志對實施方案設計總體思路、治理措施佈設、及如何將水土保持重點治理專案與閩瑪生態村周邊生態建設工程項結合的介紹後，檢查組認為，瑪納斯縣沙河小流域水土保持綜合治理工程專案區選址合理可行，與前兩期已實施的專案結合並集中連片實施，符合水土保持綜合治理的要求。 <br>
"
      + "    現場檢查後，檢查組一行與昌吉州水利局、瑪納斯縣水利局的有關領導及專案實施方案設計單位的設計人員進行了座談，在結合了閩瑪生態村規劃和建設的經驗後一致認為：水土保持綜合治理工程是社會經濟發展的要求，是落實習近平總書記系列講話中“寧要綠水青山，不要金山銀山”重要思想的重要舉措，前期工作尤為重要，一是要按照“統一規劃、分步實施、穩步推進”的原則和構建“生態修復、生態治理、生態保護”三道水土保持防線的思路進行建設；二是要將人與自然和諧相處的理念、以人為本的理念、可持續發展的理念以及保護自然生態等新理念貫穿進水土保持綜合治理工程中，使水土保持工作突出生態優先，治理措施與自然景觀相協調；三是要加大水土保持宣傳力度，讓水土保持走進千家萬戶、走進學校課堂，讓越來越多的人瞭解水土保持工作，逐漸增強水土生態保護意識；四是要在管理上層層落實責任主體，嚴格按照水土保持重點工程建設管理程式要求做好洋沙小流域水土保持綜合治理工程建設，同時，要加強與相關部門的配合和溝通，使各方面的資金捆綁使用，突顯規模效益。</p>
"
      + "<p> <br>
"
      + "<img style="WIDTH: 263px; HEIGHT: 156px" border="0" width="675" height="472" src="http://www.xjslt.gov.cn/static/ewebeditor/uploadfile/img3/20170505130428623001.jpg">   <img style="WIDTH: 256px; HEIGHT: 159px" border="0" width="775" height="745" src="http://www.xjslt.gov.cn/static/ewebeditor/uploadfile/img3/20170505130451341001.jpg">  <img style="WIDTH: 216px; HEIGHT: 158px" border="0" width="711" height="676" src="http://www.xjslt.gov.cn/static/ewebeditor/uploadfile/img3/20170505130538948001.jpg"><br>
"
      + "<br>
"
      + "<br>
"
      + "</p>";

1. 建立工程，並在佈局檔案設定WebView以及在顯示的Activity完成findViewById()操作。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mazaiting.webviewtest.MainActivity"
    >

  <WebView
      android:id="@+id/webView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      />
</RelativeLayout>

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    WebView webView = (WebView) findViewById(R.id.webView);

  }

1. 載入網頁,執行這段程式碼時，要新增網路許可權，因為資料中含有網路圖片。

webView.loadData(DATA,"text/html;charset=UTF-8", "UTF-8");

1. 設定WebView與JavaScript互動,建立一個類，類中建立一個方法，並新增@JavascriptInterface註解。

  public class JavaScriptInterface{
    @JavascriptInterface
    public void openImage(String path){ // 獲取到圖片連結，函式內執行自己的想要執行的邏輯
      Toast.makeText(MainActivity.this, path, Toast.LENGTH_SHORT).show();
    }
  }

1. WebView圖片點選程式碼配置

    final WebView webView = (WebView) findViewById(R.id.webView);
    /**
     * 處理將Html中的網頁圖片點選
     */
    // 1. 獲取WebView的設定物件
    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    // 3. 設定允許JavaScript彈窗
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
    // 4. 防止中文亂碼
    settings.setDefaultTextEncodingName("UTF-8");
    // 5. 載入網頁
    webView.loadData(DATA,"text/html;charset=UTF-8", "UTF-8");
    // 6. 載入JavaScript
    webView.addJavascriptInterface(new JavaScriptInterface(), "imageListener");
    // 7. 設定WebView客戶端
    webView.setWebViewClient(new WebViewClient(){
      /**頁面載入完成*/
      @Override public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 這段JavaScript函式的功能就是註冊監聽，遍歷所有的img標籤，並新增
        // onClick函式，函式的功能是在圖片點選的時候呼叫本地Java介面並傳遞url過去
        webView.loadUrl("javascript:(function(){" +
            "var obj = document.getElementsByTagName("img");" +
            "for(var i=0;i<obj.length;i++){" +
            "obj[i].onclick=function(){" +
            "window.imageListener.openImage(this.src)}" +
            "}" +
            "})()");
      }
    });