前言：隨著市場(chǎng)需求的不斷變化蹂安，原生安卓已經(jīng)無法滿足客戶的需要了，現(xiàn)在很多app都在使用Android和h5的交互實(shí)現(xiàn)某些功能晴裹，比如商品詳情頁，文章詳情頁面救赐，商品點(diǎn)評(píng)頁面涧团，還有某些復(fù)雜的展示頁面等等，設(shè)置登陸頁面都有可能是和js交互做到的经磅。通過交互可以很快速的達(dá)到效果泌绣，原生的安卓去做的話就會(huì)很麻煩。今天我就簡(jiǎn)單講一下使用WebView做到j(luò)s代碼和安卓的交互预厌，通過一個(gè)小demo教你學(xué)會(huì)js和Android的交互阿迈。

首先來看看這篇博客要講解內(nèi)容的大綱（這個(gè)圖是我自己畫的，網(wǎng)上找不到的）

WebView詳解.png

目錄：
一轧叽、WebView的基本使用
二苗沧、安卓通過WebView和js交互
三、WebView的那些坑
四炭晒、WebView的內(nèi)存泄漏怎么辦待逞？
五、WebView的使用漏洞 及其修復(fù)方式
六网严、WebView 的緩存機(jī)制 & 資源預(yù)加載方案

由于內(nèi)容太多识樱，分三篇講解：

• WebView深度學(xué)習(xí)（一）之WebView的基本使用以及Android和js的交互
• WebView深度學(xué)習(xí)（二）之全面總結(jié)WebView遇到的坑及優(yōu)化
• WebView深度學(xué)習(xí)（三）之WebView的內(nèi)存泄漏、漏洞以及緩存機(jī)制

? 一、WebView的基本使用

WebView是一個(gè)基于webkit引擎怜庸、展現(xiàn)web頁面的控件当犯。Webview在低版本和高版本采用了不同的webkit版本內(nèi)核，4.4后直接使用了Chrome休雌。
　　WebView控件功能強(qiáng)大灶壶，除了具有一般View的屬性和設(shè)置外，還可以對(duì)url請(qǐng)求杈曲、頁面加載(直接使用html文件（網(wǎng)絡(luò)上或本地assets中）作布局)驰凛、渲染W(wǎng)b頁面、頁面交互(和js交互)進(jìn)行強(qiáng)大的處理担扑。

（一）常用方法

• （1）　WebView的狀態(tài)

//激活WebView為活躍狀態(tài)恰响，能正常執(zhí)行網(wǎng)頁的響應(yīng)
webView.onResume() ；

//當(dāng)頁面被失去焦點(diǎn)被切換到后臺(tái)不可見狀態(tài)涌献，需要執(zhí)行onPause
//通過onPause動(dòng)作通知內(nèi)核暫停所有的動(dòng)作胚宦，比如DOM的解析、plugin的執(zhí)行燕垃、JavaScript執(zhí)行枢劝。
webView.onPause()；

//當(dāng)應(yīng)用程序(存在webview)被切換到后臺(tái)時(shí)卜壕，這個(gè)方法不僅僅針對(duì)當(dāng)前的webview而是全局的全應(yīng)用程序的webview
//它會(huì)暫停所有webview的layout您旁，parsing，javascripttimer轴捎。降低CPU功耗鹤盒。
webView.pauseTimers()

//恢復(fù)pauseTimers狀態(tài)
webView.resumeTimers()；

//銷毀Webview
//在關(guān)閉了Activity時(shí)侦副，如果Webview的音樂或視頻侦锯，還在播放。就必須銷毀Webview
//但是注意：webview調(diào)用destory時(shí),webview仍綁定在Activity上
//這是由于自定義webview構(gòu)建時(shí)傳入了該Activity的context對(duì)象
//因此需要先從父容器中移除webview,然后再銷毀webview:
rootLayout.removeView(webView); 
webView.destroy();

• （2）　關(guān)于前進(jìn) / 后退網(wǎng)頁

//是否可以后退
Webview.canGoBack() 
//后退網(wǎng)頁
Webview.goBack()

//是否可以前進(jìn)                     
Webview.canGoForward()
//前進(jìn)網(wǎng)頁
Webview.goForward()

//以當(dāng)前的index為起始點(diǎn)前進(jìn)或者后退到歷史記錄中指定的steps
//如果steps為負(fù)數(shù)則為后退秦驯，正數(shù)則為前進(jìn)
Webview.goBackOrForward(intsteps) 

常見用法：Back鍵控制網(wǎng)頁后退

問題：在不做任何處理前提下 尺碰，瀏覽網(wǎng)頁時(shí)點(diǎn)擊系統(tǒng)的“Back”鍵,整個(gè) Browser 會(huì)調(diào)用 finish()而結(jié)束自身
目標(biāo)：點(diǎn)擊返回后，是網(wǎng)頁回退而不是推出瀏覽器

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

• （3）　清除緩存數(shù)據(jù)

//清除網(wǎng)頁訪問留下的緩存
//由于內(nèi)核緩存是全局的因此這個(gè)方法不僅僅針對(duì)webview而是針對(duì)整個(gè)應(yīng)用程序.
Webview.clearCache(true);

//清除當(dāng)前webview訪問的歷史記錄
//只會(huì)webview訪問歷史記錄里的所有記錄除了當(dāng)前訪問記錄
Webview.clearHistory()译隘；

//這個(gè)api僅僅清除自動(dòng)完成填充的表單數(shù)據(jù)亲桥，并不會(huì)清除WebView存儲(chǔ)到本地的數(shù)據(jù)
Webview.clearFormData()；

（二）常用類

• （1）　WebSettings類（主要作用是：對(duì)WebView進(jìn)行配置和管理）

//生成一個(gè)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必須設(shè)置支持Javascript
webSettings.setJavaScriptEnabled(true);  

//支持插件
webSettings.setPluginsEnabled(true); 

//設(shè)置自適應(yīng)屏幕，兩者合用（下面這兩個(gè)方法合用）
webSettings.setUseWideViewPort(true); //將圖片調(diào)整到適合webview的大小 
webSettings.setLoadWithOverviewMode(true); // 縮放至屏幕的大小

//縮放操作
webSettings.setSupportZoom(true); //支持縮放皂甘，默認(rèn)為true玻驻。是下面那個(gè)的前提。
webSettings.setBuiltInZoomControls(true); //設(shè)置內(nèi)置的縮放控件。若為false璧瞬，則該WebView不可縮放
webSettings.setDisplayZoomControls(false); //隱藏原生的縮放控件

//其他細(xì)節(jié)操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //關(guān)閉webview中緩存 
webSettings.setAllowFileAccess(true); //設(shè)置可以訪問文件 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通過JS打開新窗口 
webSettings.setLoadsImagesAutomatically(true); //支持自動(dòng)加載圖片
webSettings.setDefaultTextEncodingName("utf-8");//設(shè)置編碼格式

//設(shè)置WebView緩存（當(dāng)加載 html 頁面時(shí)户辫，WebView會(huì)在/data/data/包名目錄下生成 database 與 cache 兩個(gè)文件夾，請(qǐng)求的 URL記錄保存在 WebViewCache.db嗤锉，而 URL的內(nèi)容是保存在 WebViewCache 文件夾下）

//優(yōu)先使用緩存: 
WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
    //緩存模式如下：
    //LOAD_CACHE_ONLY: 不使用網(wǎng)絡(luò)渔欢，只讀取本地緩存數(shù)據(jù)
    //LOAD_DEFAULT: （默認(rèn)）根據(jù)cache-control決定是否從網(wǎng)絡(luò)上取數(shù)據(jù)。
    //LOAD_NO_CACHE: 不使用緩存瘟忱，只從網(wǎng)絡(luò)獲取數(shù)據(jù).
    //LOAD_CACHE_ELSE_NETWORK奥额，只要本地有，無論是否過期访诱，或者no-cache垫挨，都使用緩存中的數(shù)據(jù)。

//不使用緩存: 
WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

//結(jié)合使用（離線加載）（注意：每個(gè) Application 只調(diào)用一次 WebSettings.setAppCachePath()触菜，WebSettings.setAppCacheMaxSize()）

if (NetStatusUtil.isConnected(getApplicationContext())) {//判斷網(wǎng)絡(luò)是否連接
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//根據(jù)cache-control決定是否從網(wǎng)絡(luò)上取數(shù)據(jù)九榔。
} else {
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//沒網(wǎng)，則從本地獲取涡相，即離線加載
}

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); //設(shè)置  Application Caches 緩存目錄

• （2）　WebViewClient類（主要作用是：處理各種通知 & 請(qǐng)求事件）

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

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

//步驟3. 復(fù)寫shouldOverrideUrlLoading()方法哲泊，
webView.setWebViewClient(new WebViewClient(){
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    //使得打開網(wǎng)頁時(shí)不調(diào)用系統(tǒng)瀏覽器， 而是在本W(wǎng)ebView中顯示
    view.loadUrl(url);
    return true;
  }

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

  @Override
  public void onPageFinished(WebView view, String url) {
    //設(shè)定加載結(jié)束的操作
  }

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

  @Override
  public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
    switch(errorCode){
    //該方法傳回了錯(cuò)誤碼催蝗，根據(jù)錯(cuò)誤類型可以進(jìn)行不同的錯(cuò)誤分類處理 
      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請(qǐng)  
    handler.proceed();    //表示等待證書響應(yīng)
    // handler.cancel();      //表示掛起連接切威，為默認(rèn)方式
    // handler.handleMessage(null);    //可做其他處理
  }    
});

• （3）　WebChromeClient類( 作用：輔助 WebView 處理 Javascript 的對(duì)話框,網(wǎng)站圖標(biāo),網(wǎng)站標(biāo)題等等。)

  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)生逸；
      }      
  });

• 一個(gè)demo示范一下以上幾個(gè)類的用法:

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">


   <!-- 獲取網(wǎng)站的標(biāo)題-->
    <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=""/>

    <!--獲取加載進(jìn)度-->
    <TextView
        android:layout_below="@+id/text_beginLoading"
        android:id="@+id/text_Loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

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

    <!--顯示網(wǎng)頁區(qū)域-->
    <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/");
        //設(shè)置不用系統(tǒng)瀏覽器打開,直接顯示在當(dāng)前Webview
        mWebview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        //設(shè)置WebChromeClient類
        mWebview.setWebChromeClient(new WebChromeClient() {
            //獲取網(wǎng)站標(biāo)題
            @Override
            public void onReceivedTitle(WebView view, String title) {
                System.out.println("標(biāo)題在這里");
                mtitle.setText(title);
            }

            //獲取加載進(jìn)度
            @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);
                }
            }
        });

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

            //設(shè)置結(jié)束加載函數(shù)
            @Override
            public void onPageFinished(WebView view, String url) {
                endLoading.setText("結(jié)束加載了");
            }
        });
    }

    //點(diǎn)擊返回上一頁面而不是退出瀏覽器
    @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互相調(diào)用方法，二者溝通的橋梁是WebView槽袄，實(shí)際上是：

• Android去調(diào)用JS的代碼
• JS去調(diào)用Android的代碼

對(duì)于 Android調(diào)用JS代碼 的方法有2種：

• 1. 通過WebView的loadUrl（）
• 2. 通過WebView的evaluateJavascript（）

對(duì)于 JS調(diào)用Android代碼 的方法有3種：

• 1. 通過WebView的addJavascriptInterface（）進(jìn)行對(duì)象映射
• 2. 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調(diào)攔截 url
• 3. 通過 WebChromeClient 的onJsAlert()烙无、onJsConfirm()、onJsPrompt（）方法回調(diào)攔截JS對(duì)話框alert()遍尺、confirm()截酷、prompt（） 消息

（一）　Android調(diào)用 JS 代碼

• （1）通過WebView的loadUrl（）

實(shí)例說明：為了方便展示，本文是采用Andorid調(diào)用本地JS代碼說明乾戏。實(shí)際開發(fā)中迂苛，Android更多的是調(diào)用遠(yuǎn)程JS代碼，即將加載的JS代碼路徑改成url即可鼓择。

• 步驟1：將需要調(diào)用的JS代碼以.html格式放到 src/main/assets 文件夾里

需要加載JS代碼：javascript.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Android調(diào)用 JS 代碼demo</title>
// JS代碼
     <script>
       // Android需要調(diào)用的方法
       function callJS(){
          alert("Android調(diào)用了JS的callJS方法");
       }
    </script>
   </head>
</html>

• 步驟2：在Android里通過WebView設(shè)置調(diào)用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();

        // 設(shè)置與Js交互的權(quán)限
        webSettings.setJavaScriptEnabled(true);
        // 設(shè)置允許JS彈窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 先載入JS代碼
        // 格式規(guī)定為: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) {
                // 必須另開線程進(jìn)行JS方法調(diào)用(否則無法調(diào)用)
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {

                        // 注意調(diào)用的JS方法名要對(duì)應(yīng)上
                        // 調(diào)用javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    }
                });

            }
        });

        // 由于設(shè)置了彈窗檢驗(yàn)調(diào)用結(jié)果,所以需要支持js對(duì)話框
        // webview只是載體三幻，內(nèi)容的渲染需要使用webviewChromClient類去實(shí)現(xiàn)
        // 通過設(shè)置WebChromeClient對(duì)象處理JavaScript的對(duì)話框
        //設(shè)置響應(yīng)js 的Alert()函數(shù)
        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調(diào)用 JS代碼 通過WebView的loadUrl（）

• （2）通過WebView的evaluateJavascript（）

說明：該方法比第一種方法效率更高，因?yàn)樵摲椒ǖ膱?zhí)行不會(huì)使頁面刷新呐能，而第一種方法（loadUrl ）的執(zhí)行則會(huì)念搬。該方法在Android 4.4 后才可使用抑堡。

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

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

• （3）兩種方法的對(duì)比

• （4）使用建議

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

// Android版本變量
final int version = Build.VERSION.SDK_INT;
// 因?yàn)樵摲椒ㄔ?Android 4.4 版本才可使用爷恳，所以使用時(shí)需進(jìn)行版本判斷
if (version < 18) {
    mWebView.loadUrl("javascript:callJS()");
} else {
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此處為 js 返回的結(jié)果
        }
    });
}

（二）　JS通過WebView調(diào)用 Android 代碼

（1）通過WebView的addJavascriptInterface（）進(jìn)行對(duì)象映射

• 1. 定義一個(gè)與JS對(duì)象映射關(guān)系的Android類：

// 定義一個(gè)與JS對(duì)象映射關(guān)系的Android類AndroidtoJs , 繼承自O(shè)bject類
public class AndroidtoJs extends Object {
    // 定義JS需要調(diào)用的方法
    // 被JS調(diào)用的方法必須加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS調(diào)用了Android的hello方法");
    }
}

• 2. 將需要調(diào)用的JS代碼以.html格式放到 src/main/assets 文件夾里

以下是需要加載JS代碼：javascript.html

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

         function callAndroid(){
        // 由于對(duì)象映射有缆，所以調(diào)用test對(duì)象等于調(diào)用Android映射的對(duì)象
            test.hello("js調(diào)用了android中的hello方法");
         }
      </script>
   </head>
   <body>
      //點(diǎn)擊按鈕則調(diào)用callAndroid函數(shù)
      <button type="button" id="button1" onclick="callAndroid()"></button>
   </body>
</html>

• 3. 在Android里通過WebView設(shè)置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();

        // 設(shè)置與Js交互的權(quán)限
        webSettings.setJavaScriptEnabled(true);

        // 通過addJavascriptInterface()將Java對(duì)象映射到JS對(duì)象
        //參數(shù)1：Javascript對(duì)象名
        //參數(shù)2：Java對(duì)象名
        mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS類對(duì)象映射到j(luò)s的test對(duì)象

        // 加載JS代碼
        // 格式規(guī)定為:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");
       //后面的無關(guān)代碼省略。温亲。棚壁。

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

通過WebView的addJavascriptInterface（）進(jìn)行對(duì)象映射

（2）通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調(diào)攔截 url

具體原理： Android通過 WebViewClient 的回調(diào)方法shouldOverrideUrlLoading ()攔截 url铸豁，解析該 url 的協(xié)議灌曙，如果檢測(cè)到是預(yù)先約定好的協(xié)議，就調(diào)用Android相應(yīng)的方法 节芥。

• 1.在JS約定所需要的Url協(xié)議

這里的示例用的是本地的html代碼在刺，放到src/main/assets文件夾里，文件名為javascript.html头镊。開發(fā)中肯定是從服務(wù)器獲取對(duì)應(yīng)資源蚣驼。

<!DOCTYPE html>
<html>

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

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

<!-- 點(diǎn)擊按鈕則調(diào)用callAndroid（）方法  -->
   <body>
     <button type="button" id="button1" onclick="callAndroid()">點(diǎn)擊調(diào)用Android代碼</button>
   </body>
</html>

當(dāng)該JS通過Android的mWebView.loadUrl("file:///android_asset/javascript.html")加載后，就會(huì)回調(diào)shouldOverrideUrlLoading()

• 2.在Android通過WebViewClient復(fù)寫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();

        // 設(shè)置與Js交互的權(quán)限
        webSettings.setJavaScriptEnabled(true);
        // 設(shè)置允許JS彈窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 步驟1：加載JS代碼
        // 格式規(guī)定為:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");


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

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

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

看看效果圖：

• 3.特點(diǎn)：

優(yōu)點(diǎn)：不存在方式1的漏洞；
缺點(diǎn)：JS獲取Android方法的返回值復(fù)雜坛芽。 如果JS想要得到Android方法的返回值留储，只能通過 WebView 的
loadUrl （）去執(zhí)行 JS 方法把返回值傳遞回去，相關(guān)的代碼如下：

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

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

（3）通過 WebChromeClient 的onJsAlert()咙轩、onJsConfirm()获讳、onJsPrompt()方法回調(diào)攔截JS對(duì)話框alert()、confirm()活喊、prompt() 消息

• 1.JS中的三個(gè)常用的對(duì)話框方法介紹：

• 2.原理：Android通過 WebChromeClient 的onJsAlert()帅矗、onJsConfirm()、onJsPrompt（）方法回調(diào)分別攔截JS對(duì)話框 （即上面表格中的三個(gè)方法），得到他們的消息內(nèi)容，然后解析即可是趴。

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

常用的攔截是：攔截 JS的輸入框（即prompt（）方法）。因?yàn)橹挥衟rompt（）可以返回任意類型的值凛俱，操作最全面方便喘落、更加靈活；而alert（）對(duì)話框沒有返回值最冰；confirm（）對(duì)話框只能返回兩種狀態(tài)（確定 / 取消）兩個(gè)值。

• 3.步驟1：加載JS代碼稀火，這里的示例用的是本地的html代碼暖哨，放到src/main/assets文件夾里，文件名為javascript.html凰狞。開發(fā)中肯定是從服務(wù)器獲取對(duì)應(yīng)資源篇裁。

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

        <script>

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

        <!-- 點(diǎn)擊按鈕則調(diào)用clickprompt()  -->
        <body>
            <button type="button" id="button1" onclick="clickprompt()">點(diǎn)擊調(diào)用Android代碼</button>
        </body>
    </html>

• 4.步驟2：在Android通過WebChromeClient復(fù)寫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();

            // 設(shè)置與Js交互的權(quán)限
            webSettings.setJavaScriptEnabled(true);
            // 設(shè)置允許JS彈窗
            webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

            // 先加載JS代碼
            // 格式規(guī)定為:file:///android_asset/文件名.html
            mWebView.loadUrl("file:///android_asset/javascript.html");


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

                    Uri uri = Uri.parse(message);
                    // 如果url的協(xié)議 = 預(yù)先約定的 js 協(xié)議
                    // 就解析往下解析參數(shù)
                    if ( uri.getScheme().equals("js")) {
                        // 如果 authority  = 預(yù)先約定協(xié)議里的 webview赡若，即代表都符合約定的協(xié)議
                        // 所以攔截url,下面JS開始調(diào)用Android需要的方法
                        if (uri.getAuthority().equals("webview")) {
                            // 執(zhí)行JS所需要調(diào)用的邏輯
                            System.out.println("js調(diào)用了Android的方法");
                            // 可以在協(xié)議上帶有參數(shù)并傳遞到Android上
                            HashMap<String, String> params = new HashMap<>();
                            Set<String> collection = uri.getQueryParameterNames();

                            //參數(shù)result:代表消息框的返回值(輸入值)
                            result.confirm("js調(diào)用了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的確認(rèn)框
                @Override
                public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                    return super.onJsConfirm(view, url, message, result);
                }
            });
        }
    }

當(dāng)使用mWebView.loadUrl("file:///android_asset/javascript.html")加載了上述JS代碼后，就會(huì)觸發(fā)回調(diào)onJsPrompt（）逾冬。如果是攔截警告框（即alert()）黍聂，則觸發(fā)回調(diào)onJsAlert（）；如果是攔截確認(rèn)框（即confirm()）身腻，則觸發(fā)回調(diào)onJsConfirm（）产还；

（4）三種方式的對(duì)比 & 使用場(chǎng)景

關(guān)于WebView的那些坑牛隅，歡迎查看我的下一篇博客：
WebView深度學(xué)習(xí)（二）之全面總結(jié)WebView遇到的坑及優(yōu)化

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