WebView深度學習（一）之WebView的基本使用以及Android和js的互動

AWeiLoveAndroid發表於2017-07-01

前言：隨著市場需求的不斷變化，原生安卓已經無法滿足客戶的需要了，現在很多app都在使用Android和h5的互動實現某些功能，比如商品詳情頁，文章詳情頁面，商品點評頁面，還有某些複雜的展示頁面等等，設定登陸頁面都有可能是和js互動做到的。通過互動可以很快速的達到效果，原生的安卓去做的話就會很麻煩。今天我就簡單講一下使用WebView做到js程式碼和安卓的互動，通過一個小demo教你學會js和Android的互動。

首先來看看這篇部落格要講解內容的大綱（這個圖是我自己畫的，網上找不到的）

WebView詳解.png

目錄：
一、WebView的基本使用
二、安卓通過WebView和js互動
三、WebView的那些坑
四、WebView的記憶體洩漏怎麼辦？
五、WebView的使用漏洞及其修復方式
六、WebView 的快取機制 & 資源預載入方案

由於內容太多，分三篇講解：

⇒ 一、WebView的基本使用

WebView是一個基於webkit引擎、展現web頁面的控制元件。Webview在低版本和高版本採用了不同的webkit版本核心，4.4後直接使用了Chrome。
　　WebView控制元件功能強大，除了具有一般View的屬性和設定外，還可以對url請求、頁面載入(直接使用html檔案（網路上或本地assets中）作佈局)、渲染Wb頁面、頁面互動(和js互動)進行強大的處理。

（一）常用方法

（1）　WebView的狀態

//啟用WebView為活躍狀態，能正常執行網頁的響應
webView.onResume() ；

//當頁面被失去焦點被切換到後臺不可見狀態，需要執行onPause
//通過onPause動作通知核心暫停所有的動作，比如DOM的解析、plugin的執行、JavaScript執行。
webView.onPause()；

//當應用程式(存在webview)被切換到後臺時，這個方法不僅僅針對當前的webview而是全域性的全應用程式的webview
//它會暫停所有webview的layout，parsing，javascripttimer。降低CPU功耗。
webView.pauseTimers()

//恢復pauseTimers狀態
webView.resumeTimers()；

//銷燬Webview
//在關閉了Activity時，如果Webview的音樂或視訊，還在播放。就必須銷燬Webview
//但是注意：webview呼叫destory時,webview仍繫結在Activity上
//這是由於自定義webview構建時傳入了該Activity的context物件
//因此需要先從父容器中移除webview,然後再銷燬webview:
rootLayout.removeView(webView); 
webView.destroy();

（2）　關於前進 / 後退網頁

//是否可以後退
Webview.canGoBack() 
//後退網頁
Webview.goBack()

//是否可以前進                     
Webview.canGoForward()
//前進網頁
Webview.goForward()

//以當前的index為起始點前進或者後退到歷史記錄中指定的steps
//如果steps為負數則為後退，正數則為前進
Webview.goBackOrForward(intsteps)

常見用法：Back鍵控制網頁後退

問題：在不做任何處理前提下 ，瀏覽網頁時點選系統的“Back”鍵,整個 Browser 會呼叫 finish()而結束自身
目標：點選返回後，是網頁回退而不是推出瀏覽器

解決方案：在當前Activity中處理並消費掉該 Back 事件
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { 
    mWebView.goBack();
    return true;
    }
    return super.onKeyDown(keyCode, event);
}

（3）　清除快取資料

//清除網頁訪問留下的快取
//由於核心快取是全域性的因此這個方法不僅僅針對webview而是針對整個應用程式.
Webview.clearCache(true);

//清除當前webview訪問的歷史記錄
//只會webview訪問歷史記錄裡的所有記錄除了當前訪問記錄
Webview.clearHistory()；

//這個api僅僅清除自動完成填充的表單資料，並不會清除WebView儲存到本地的資料
Webview.clearFormData()；

（二）常用類

（1）　WebSettings類（主要作用是：對WebView進行配置和管理）

//生成一個WebView元件(兩種方式)
//方式1：直接在在Activity中生成
WebView webView = new WebView(this)
//方法2：在Activity的layout檔案裡新增webview控制元件：
WebView webview = (WebView) findViewById(R.id.webView1);

//宣告WebSettings子類
WebSettings webSettings = webView.getSettings();

//如果訪問的頁面中要與Javascript互動，則webview必須設定支援Javascript
webSettings.setJavaScriptEnabled(true);  

//支援外掛
webSettings.setPluginsEnabled(true); 

//設定自適應螢幕，兩者合用（下面這兩個方法合用）
webSettings.setUseWideViewPort(true); //將圖片調整到適合webview的大小 
webSettings.setLoadWithOverviewMode(true); // 縮放至螢幕的大小

//縮放操作
webSettings.setSupportZoom(true); //支援縮放，預設為true。是下面那個的前提。
webSettings.setBuiltInZoomControls(true); //設定內建的縮放控制元件。若為false，則該WebView不可縮放
webSettings.setDisplayZoomControls(false); //隱藏原生的縮放控制元件

//其他細節操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //關閉webview中快取 
webSettings.setAllowFileAccess(true); //設定可以訪問檔案 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支援通過JS開啟新視窗 
webSettings.setLoadsImagesAutomatically(true); //支援自動載入圖片
webSettings.setDefaultTextEncodingName("utf-8");//設定編碼格式

//設定WebView快取（當載入 html 頁面時，WebView會在/data/data/包名目錄下生成 database 與 cache 兩個資料夾，請求的 URL記錄儲存在 WebViewCache.db，而 URL的內容是儲存在 WebViewCache 資料夾下）

//優先使用快取: 
WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
    //快取模式如下：
    //LOAD_CACHE_ONLY: 不使用網路，只讀取本地快取資料
    //LOAD_DEFAULT: （預設）根據cache-control決定是否從網路上取資料。
    //LOAD_NO_CACHE: 不使用快取，只從網路獲取資料.
    //LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用快取中的資料。

//不使用快取: 
WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

//結合使用（離線載入）（注意：每個 Application 只呼叫一次 WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()）

if (NetStatusUtil.isConnected(getApplicationContext())) {//判斷網路是否連線
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//根據cache-control決定是否從網路上取資料。
} else {
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//沒網，則從本地獲取，即離線載入
}

webSettings.setDomStorageEnabled(true); // 開啟 DOM storage API 功能
webSettings.setDatabaseEnabled(true);   //開啟 database storage API 功能
webSettings.setAppCacheEnabled(true);//開啟 Application Caches 功能

String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
webSettings.setAppCachePath(cacheDirPath); //設定  Application Caches 快取目錄

（2）　WebViewClient類（主要作用是：處理各種通知 & 請求事件）

//步驟1. 定義Webview元件
Webview webview = (WebView) findViewById(R.id.webView1);

//步驟2. 選擇載入方式
//方式a. 載入一個網頁：
webView.loadUrl("http://www.google.com/");
//方式b：載入apk包中的html頁面
webView.loadUrl("file:///android_asset/test.html");
//方式c：載入手機本地的html頁面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

//步驟3. 複寫shouldOverrideUrlLoading()方法，
webView.setWebViewClient(new WebViewClient(){
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    //使得開啟網頁時不呼叫系統瀏覽器， 而是在本WebView中顯示
    view.loadUrl(url);
    return true;
  }

  @Override
  public void  onPageStarted(WebView view, String url, Bitmap favicon) {
    //設定載入開始的操作
  }

  @Override
  public void onPageFinished(WebView view, String url) {
    //設定載入結束的操作
  }

  @Override
  public boolean onLoadResource(WebView view, String url) {
    //設定載入資源的操作
  }

  @Override
  public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
    switch(errorCode){
    //該方法傳回了錯誤碼，根據錯誤型別可以進行不同的錯誤分類處理 
      case HttpStatus.SC_NOT_FOUND:
        view.loadUrl("file:///android_assets/error_handle.html");
        break;
    }
  }

  @Override    
  public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {//處理https請  
    handler.proceed();    //表示等待證照響應
    // handler.cancel();      //表示掛起連線，為預設方式
    // handler.handleMessage(null);    //可做其他處理
  }    
});

（3）　WebChromeClient類( 作用：輔助 WebView 處理 Javascript 的對話方塊,網站圖示,網站標題等等。)

  webview.setWebChromeClient(new WebChromeClient(){
      @Override
      public void onProgressChanged(WebView view, int newProgress) {
          if (newProgress < 100) {
          String progress = newProgress + "%";
          progress.setText(progress);
          }else{
          // to do something...
          }
      }

      @Override
      public void onReceivedTitle(WebView view, String title) {
         titleview.setText(title)；
      }      
  });

一個demo示範一下以上幾個類的用法:

activity_main.xml如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.carson_ho.webview_demo.MainActivity">


   <!-- 獲取網站的標題-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

    <!--開始載入提示-->
    <TextView
        android:id="@+id/text_beginLoading"
        android:layout_below="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

    <!--獲取載入進度-->
    <TextView
        android:layout_below="@+id/text_beginLoading"
        android:id="@+id/text_Loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

    <!--結束載入提示-->
    <TextView
        android:layout_below="@+id/text_Loading"
        android:id="@+id/text_endLoading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

    <!--顯示網頁區域-->
    <WebView
        android:id="@+id/webView1"
        android:layout_below="@+id/text_endLoading"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="10dp" />
</RelativeLayout>

java如下：

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.ViewGroup;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {
    WebView mWebview;
    WebSettings mWebSettings;
    TextView beginLoading,endLoading,loading,mtitle;

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

        mWebview = (WebView) findViewById(R.id.webView1);
        beginLoading = (TextView) findViewById(R.id.text_beginLoading);
        endLoading = (TextView) findViewById(R.id.text_endLoading);
        loading = (TextView) findViewById(R.id.text_Loading);
        mtitle = (TextView) findViewById(R.id.title);
        mWebSettings = mWebview.getSettings();
        mWebview.loadUrl("http://www.baidu.com/");
        //設定不用系統瀏覽器開啟,直接顯示在當前Webview
        mWebview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        //設定WebChromeClient類
        mWebview.setWebChromeClient(new WebChromeClient() {
            //獲取網站標題
            @Override
            public void onReceivedTitle(WebView view, String title) {
                System.out.println("標題在這裡");
                mtitle.setText(title);
            }

            //獲取載入進度
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                if (newProgress < 100) {
                    String progress = newProgress + "%";
                    loading.setText(progress);
                } else if (newProgress == 100) {
                    String progress = newProgress + "%";
                    loading.setText(progress);
                }
            }
        });

        //設定WebViewClient類
        mWebview.setWebViewClient(new WebViewClient() {
            //設定載入前的函式
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                System.out.println("開始載入了");
                beginLoading.setText("開始載入了");
            }

            //設定結束載入函式
            @Override
            public void onPageFinished(WebView view, String url) {
                endLoading.setText("結束載入了");
            }
        });
    }

    //點選返回上一頁面而不是退出瀏覽器
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebview.canGoBack()) {
            mWebview.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    //銷燬Webview
    @Override
    protected void onDestroy() {
        if (mWebview != null) {
            mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            mWebview.clearHistory();
            ((ViewGroup) mWebview.getParent()).removeView(mWebview);
            mWebview.destroy();
            mWebview = null;
        }
        super.onDestroy();
    }
}

⇒ 二、安卓通過WebView和js互動

Android與js通過WebView互相呼叫方法，二者溝通的橋樑是WebView，實際上是：

Android去呼叫JS的程式碼

JS去呼叫Android的程式碼

對於 Android呼叫JS程式碼 的方法有2種：

通過WebView的loadUrl（）

通過WebView的evaluateJavascript（）

對於 JS呼叫Android程式碼 的方法有3種：

通過WebView的addJavascriptInterface（）進行物件對映

通過 WebViewClient 的shouldOverrideUrlLoading ()方法回撥攔截 url

通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回撥攔截JS對話方塊alert()、confirm()、prompt（）訊息

（一）　Android呼叫 JS 程式碼

（1）通過WebView的loadUrl（）

例項說明：為了方便展示，本文是採用Andorid呼叫本地JS程式碼說明。實際開發中，Android更多的是呼叫遠端JS程式碼，即將載入的JS程式碼路徑改成url即可。

步驟1：將需要呼叫的JS程式碼以.html格式放到 src/main/assets 資料夾裡

需要載入JS程式碼：javascript.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Android呼叫 JS 程式碼demo</title>
// JS程式碼
     <script>
       // Android需要呼叫的方法
       function callJS(){
          alert("Android呼叫了JS的callJS方法");
       }
    </script>
   </head>
</html>

步驟2：在Android裡通過WebView設定呼叫JS程式碼

Android程式碼：MainActivity.java

 public class MainActivity extends AppCompatActivity {

    WebView mWebView;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
       mWebView =(WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();

        // 設定與Js互動的許可權
        webSettings.setJavaScriptEnabled(true);
        // 設定允許JS彈窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 先載入JS程式碼
        // 格式規定為:file:///android_asset/檔名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");
        button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 必須另開執行緒進行JS方法呼叫(否則無法呼叫)
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {

                        // 注意呼叫的JS方法名要對應上
                        // 呼叫javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    }
                });

            }
        });

        // 由於設定了彈窗檢驗呼叫結果,所以需要支援js對話方塊
        // webview只是載體，內容的渲染需要使用webviewChromClient類去實現
        // 通過設定WebChromeClient物件處理JavaScript的對話方塊
        //設定響應js 的Alert()函式
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
        });
    }
}

Android呼叫 JS程式碼通過WebView的loadUrl（）

（2）通過WebView的evaluateJavascript（）

說明：該方法比第一種方法效率更高，因為該方法的執行不會使頁面重新整理，而第一種方法（loadUrl ）的執行則會。該方法在Android 4.4 後才可使用。

// 只需要將第一種方法的loadUrl()換成下面該方法即可

mWebView.evaluateJavascript（"javascript:callJS()", 
    new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此處為 js 返回的結果
        }
    });
}

（3）兩種方法的對比

呼叫方式	優點	缺點	使用場景
呼叫loadUrl()	方便簡潔	效率低，獲取返回值麻煩	不需要獲取返回值，對效能要求較低時
呼叫evaluateJavascript()	效率高	向下相容性差(僅用於4.4+)	適用於4.4+

（4）使用建議

兩種方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2

// Android版本變數
final int version = Build.VERSION.SDK_INT;
// 因為該方法在 Android 4.4 版本才可使用，所以使用時需進行版本判斷
if (version < 18) {
    mWebView.loadUrl("javascript:callJS()");
} else {
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此處為 js 返回的結果
        }
    });
}

（二）　JS通過WebView呼叫 Android 程式碼

（1）通過WebView的addJavascriptInterface（）進行物件對映

1. 定義一個與JS物件對映關係的Android類：

// 定義一個與JS物件對映關係的Android類AndroidtoJs , 繼承自Object類
public class AndroidtoJs extends Object {
    // 定義JS需要呼叫的方法
    // 被JS呼叫的方法必須加入@JavascriptInterface註解
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS呼叫了Android的hello方法");
    }
}

2. 將需要呼叫的JS程式碼以.html格式放到 src/main/assets 資料夾裡

以下是需要載入JS程式碼：javascript.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson</title>  
      <script>

         function callAndroid(){
        // 由於物件對映，所以呼叫test物件等於呼叫Android對映的物件
            test.hello("js呼叫了android中的hello方法");
         }
      </script>
   </head>
   <body>
      //點選按鈕則呼叫callAndroid函式
      <button type="button" id="button1" onclick="callAndroid()"></button>
   </body>
</html>

3. 在Android裡通過WebView設定Android類與JS程式碼的對映

public class MainActivity extends AppCompatActivity {

    WebView mWebView;

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

        mWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();

        // 設定與Js互動的許可權
        webSettings.setJavaScriptEnabled(true);

        // 通過addJavascriptInterface()將Java物件對映到JS物件
        //引數1：Javascript物件名
        //引數2：Java物件名
        mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS類物件對映到js的test物件

        // 載入JS程式碼
        // 格式規定為:file:///android_asset/檔名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");
       //後面的無關程式碼省略。。。

看看效果圖如下，看下圖和log提示：

通過WebView的addJavascriptInterface（）進行物件對映

（2）通過 WebViewClient 的shouldOverrideUrlLoading ()方法回撥攔截 url

具體原理： Android通過 WebViewClient 的回撥方法shouldOverrideUrlLoading ()攔截 url，解析該 url 的協議，如果檢測到是預先約定好的協議，就呼叫Android相應的方法。

1.在JS約定所需要的Url協議

這裡的示例用的是本地的html程式碼，放到src/main/assets資料夾裡，檔名為javascript.html。開發中肯定是從伺服器獲取對應資源。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>

     <script>
         function callAndroid(){
            /*約定的url協議為：js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         }
      </script>
</head>

<!-- 點選按鈕則呼叫callAndroid（）方法  -->
   <body>
     <button type="button" id="button1" onclick="callAndroid()">點選呼叫Android程式碼</button>
   </body>
</html>

當該JS通過Android的mWebView.loadUrl(“file:///android_asset/javascript.html”)載入後，就會回撥shouldOverrideUrlLoading()

2.在Android通過WebViewClient複寫shouldOverrideUrlLoading()

public class MainActivity extends AppCompatActivity {

    WebView mWebView;
//    Button button;

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

        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        // 設定與Js互動的許可權
        webSettings.setJavaScriptEnabled(true);
        // 設定允許JS彈窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 步驟1：載入JS程式碼
        // 格式規定為:file:///android_asset/檔名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");


        // 複寫WebViewClient類的shouldOverrideUrlLoading方法
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                // 步驟2：根據協議的引數，判斷是否是所需要的url
                // 一般根據scheme（協議格式） & authority（協議名）判斷（前兩個引數）
                //假定傳入進來的 url = "js://webview?arg1=111&arg2=222"（同時也是約定好的需要攔截的）
                Uri uri = Uri.parse(url);                                 

                // 如果url的協議 = 預先約定的 js 協議
                // 就解析往下解析引數
                if ( uri.getScheme().equals("js")) {
                    // 如果 authority  = 預先約定協議裡的 webview，即代表都符合約定的協議
                    // 所以攔截url,下面JS開始呼叫Android需要的方法
                    if (uri.getAuthority().equals("webview")) {
                        //  步驟3：
                        // 執行JS所需要呼叫的邏輯
                        System.out.println("js呼叫了Android的方法");
                        // 可以在協議上帶有引數並傳遞到Android上
                        HashMap<String, String> params = new HashMap<>();
                        Set<String> collection = uri.getQueryParameterNames();
                    }
                    return true;
                }
                return super.shouldOverrideUrlLoading(view, url);
            }
        );
   }
}

看看效果圖：

3.特點：

優點：不存在方式1的漏洞；
缺點：JS獲取Android方法的返回值複雜。 如果JS想要得到Android方法的返回值，只能通過 WebView 的
loadUrl （）去執行 JS 方法把返回值傳遞回去，相關的程式碼如下：

   // Android：MainActivity.java
   mWebView.loadUrl("javascript:returnResult(" + result + ")");

    // JS：javascript.html
    function returnResult(result){
        alert("result is" + result);
    }

（3）通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回撥攔截JS對話方塊alert()、confirm()、prompt() 訊息

1.JS中的三個常用的對話方塊方法介紹：

方法	作用	返回值	備註
alert()	彈出警告窗	沒有	在文字加入可換行
confirm()	彈出確認框	連個返回值	返回布林值，通過該值可以判斷點選是`確認`還是`取消`(true表示點選了`確認`，false表示點選了`取消`)
prompt()	彈出輸入框	任意設定返回值	點選`確認`返回輸入框中的值，點選`取消`返回null

2.原理：Android通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回撥分別攔截JS對話方塊（即上面表格中的三個方法），得到他們的訊息內容，然後解析即可。

下面的例子將用攔截 JS的輸入框（即prompt（）方法）說明：

常用的攔截是：攔截 JS的輸入框（即prompt（）方法）。因為只有prompt（）可以返回任意型別的值，操作最全面方便、更加靈活；而alert（）對話方塊沒有返回值；confirm（）對話方塊只能返回兩種狀態（確定 / 取消）兩個值。

3.步驟1：載入JS程式碼，這裡的示例用的是本地的html程式碼，放到src/main/assets資料夾裡，檔名為javascript.html。開發中肯定是從伺服器獲取對應資源。

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>Carson_Ho</title>

        <script>

            function clickprompt(){
            // 呼叫prompt（）
            var result=prompt("js://demo?arg1=111&arg2=222");
            alert("demo " + result);
            }
        </script>
        </head>

        <!-- 點選按鈕則呼叫clickprompt()  -->
        <body>
            <button type="button" id="button1" onclick="clickprompt()">點選呼叫Android程式碼</button>
        </body>
    </html>

4.步驟2：在Android通過WebChromeClient複寫onJsPrompt()

    public class MainActivity extends AppCompatActivity {

        WebView mWebView;
    //    Button button;

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

            mWebView = (WebView) findViewById(R.id.webview);

            WebSettings webSettings = mWebView.getSettings();

            // 設定與Js互動的許可權
            webSettings.setJavaScriptEnabled(true);
            // 設定允許JS彈窗
            webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

            // 先載入JS程式碼
            // 格式規定為:file:///android_asset/檔名.html
            mWebView.loadUrl("file:///android_asset/javascript.html");


            mWebView.setWebChromeClient(new WebChromeClient() {
                // 攔截輸入框(原理同方式2)
                // 引數message:代表promt（）的內容（不是url）
                // 引數result:代表輸入框的返回值
                @Override
                public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                // 根據協議的引數，判斷是否是所需要的url(原理同方式2)
                // 一般根據scheme（協議格式） & authority（協議名）判斷（前兩個引數）
                //假定傳入進來的 url = "js://webview?arg1=111&arg2=222"（同時也是約定好的需要攔截的）

                    Uri uri = Uri.parse(message);
                    // 如果url的協議 = 預先約定的 js 協議
                    // 就解析往下解析引數
                    if ( uri.getScheme().equals("js")) {
                        // 如果 authority  = 預先約定協議裡的 webview，即代表都符合約定的協議
                        // 所以攔截url,下面JS開始呼叫Android需要的方法
                        if (uri.getAuthority().equals("webview")) {
                            // 執行JS所需要呼叫的邏輯
                            System.out.println("js呼叫了Android的方法");
                            // 可以在協議上帶有引數並傳遞到Android上
                            HashMap<String, String> params = new HashMap<>();
                            Set<String> collection = uri.getQueryParameterNames();

                            //引數result:代表訊息框的返回值(輸入值)
                            result.confirm("js呼叫了Android的方法成功啦");
                        }
                        return true;
                    }
                    return super.onJsPrompt(view, url, message, defaultValue, result);
                }

                // 通過alert()和confirm()攔截的原理相同，此處不作過多講述

                // 攔截JS的警告框
                @Override
                public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                    return super.onJsAlert(view, url, message, result);
                }

                // 攔截JS的確認框
                @Override
                public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                    return super.onJsConfirm(view, url, message, result);
                }
            });
        }
    }

當使用mWebView.loadUrl(“file:///android_asset/javascript.html”)載入了上述JS程式碼後，就會觸發回撥onJsPrompt（）。如果是攔截警告框（即alert()），則觸發回撥onJsAlert（）；如果是攔截確認框（即confirm()），則觸發回撥onJsConfirm（）；

（4）三種方式的對比 & 使用場景

呼叫方式	優點	缺點	使用場景
通過addJavascriptInterface()進行新增物件對映	方便簡潔	Android4.2以下存在漏洞問題	Android4.2以上相對簡單應用場景
通過WebView的方法shouldOverrideUrlLoading()回撥攔截url	不存在漏洞問題	使用複雜，需要進行協議約束，從native層到web層傳遞值比較繁瑣	不需要返回值情況下互調場景
通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回撥攔截JS對話方塊訊息	不存在漏洞問題	使用複雜，需要進行協議約束	能滿足大多數情況下互調場景

關於WebView的那些坑，歡迎檢視我的下一篇部落格：
WebView深度學習（二）之全面總結WebView遇到的坑及優化

參考博文：
http://blog.csdn.net/carson_ho/article/details/64904691
http://bbs.csdn.net/topics/390905615
http://blog.csdn.net/cyuyanshujujiegou/article/details/52267817

深度學習js與安卓的互動以及WebView的那些坑
2018-01-23
深度學習JS安卓WebView
Android webview JS 互動
2019-03-12
AndroidWebViewJS
WebView與JS的互動，以及注意事項
2018-08-19
WebViewJS
webview與JS的互動
2015-06-03
WebViewJS
WebView和js的互調
2018-04-16
WebViewJS
WKWebView和WebView與JS的互動方式
2018-04-21
WebViewJS
Android webview 與 js(Vue) 互動
2018-08-22
AndroidWebViewJSVue
flutter webView 使用以及與 js 互操作
2020-03-06
FlutterWebViewJS
Android WebView：這是一份詳細 & 易懂的WebView學習攻略（含與JS互動、快取構建等）
2019-03-03
AndroidWebViewJS快取
Android學習之 WebView使用小結
2014-11-20
AndroidWebView
WebView深度學習（二）之全面總結WebView遇到的坑及優化
2018-01-09
WebView深度學習優化
Android Webview Java和Javascript安全互動
2014-09-17
AndroidWebViewJavaScript
Flutter使用JsBridge與WebView互動
2020-04-16
FlutterJSWebView
WebView深度學習（三）之WebView的記憶體洩漏、漏洞以及快取機制原理和解決方案
2018-01-10
WebView深度學習記憶體快取
Android 與WebView中的js程式碼的互動記錄
2017-04-01
AndroidWebViewJS
Android混合開發之WebView與Javascript互動
2016-10-21
AndroidWebViewJavaScript
Android與WebView資料互動
2018-07-24
AndroidWebView
Android 原生 WebView 與 JavaScript 互動
2017-07-07
AndroidWebViewJavaScript
再學Android之WebView
2019-06-11
AndroidWebView
Android：是時候掌握WebView與Js的互動技術了
2018-02-11
AndroidWebViewJS
Flutter WebView與JS互動簡易指南
2019-04-02
FlutterWebViewJS
android 的webView載入h5，和h5的互動（java和JavaScript的互動）
2016-08-02
AndroidWebViewH5JavaScript
Android Webview和ScrollView衝突和WebView使用總結
2019-03-04
AndroidWebView
JockeyJS——優秀的WebView與JS互動開源庫使用和解析
2018-06-15
JSWebView
Android WebView —— Java 與 JavaScript 互動總結
2016-12-01
AndroidWebViewJavaScript
最全面總結 Android WebView與 JS 的互動方式（含例項Demo）
2017-05-31
AndroidWebViewJS
WebView的基本使用及相關特性
2018-12-18
WebView
webview的使用
2016-07-08
WebView
記一則iOS封裝SDK的開發過程之WebView與JS的互動
2018-05-25
iOS封裝WebViewJS
Android 和 Webview 如何相互 sayHello(一)
2018-08-21
AndroidWebView
Android中WebView的使用指南：
2018-04-14
AndroidWebView
Android WebView的坑
2019-01-15
AndroidWebView
Android webview使用詳解
2016-11-07
AndroidWebView
Android中WebView使用解析
2016-02-20
AndroidWebView
Android Webview 使用小結
2015-10-08
AndroidWebView
Android在WebView中載入HTML並實現互動
2014-12-12
AndroidWebViewHTML
Android Webview的一些使用總結和遇到過得坑
2017-12-15
AndroidWebView
webview js和java相互呼叫
2018-10-30
WebViewJSJava

WebView深度學習（一）之WebView的基本使用以及Android和js的互動

首先來看看這篇部落格要講解內容的大綱（這個圖是我自己畫的，網上找不到的）

⇒ 一、WebView的基本使用

（一）常用方法

（1） WebView的狀態

（2） 關於前進 / 後退網頁

（3） 清除快取資料