前言

現在很多App裡都内置了Web網頁（Hybrid App），比如說很多電商平台，淘寶、京東、聚劃算等等，如下圖

Android：WebView與 JS 互動方式前言1. 互動方式總結2. 具體分析方式2：通過WebView的evaluateJavascript（）2.2 JS通過WebView調用 Android 代碼特點方式2：通過 WebViewClient 的方法shouldOverrideUrlLoading ()回調攔截 url特點3. 總結

上述功能是由Android的WebView實作的，其中涉及到Android用戶端與Web網頁互動的實作
今天我将全面介紹Android通過WebView與JS互動的全面方式

閱讀本文前請先閱讀：Android開發：最全面、最易懂的Webview詳解

#目錄

1. 互動方式總結

Android與JS通過WebView互相調用方法，實際上是：

Android去調用JS的代碼
JS去調用Android的代碼

二者溝通的橋梁是WebView

對于Android調用JS代碼的方法有2種：

通過 WebView 的 loadUrl（）
通過 WebView 的 evaluateJavascript（）

對于JS調用Android代碼的方法有3種：

通過 WebView 的 addJavascriptInterface（） 進行對象映射
通過 WebViewClient 的 shouldOverrideUrlLoading () 方法回調攔截 url
通過 WebChromeClient 的 onJsAlert() 、 onJsConfirm() 、 onJsPrompt（） 方法回調攔截JS對話框 alert() 、 confirm() 、 prompt（） 消息

2. 具體分析

2.1 Android通過WebView調用 JS 代碼

對于Android調用JS代碼的方法有2種：

通過 WebView 的 loadUrl（）
通過 WebView 的 evaluateJavascript（）

方式1：通過 `WebView` 的 `loadUrl（）`

執行個體介紹：點選Android按鈕，即調用WebView JS（文本名為 javascript ）中callJS（）
具體使用：

步驟1：将需要調用的JS代碼以

.html

格式放到src/main/assets檔案夾裡

為了友善展示，本文是采用Andorid調用本地JS代碼說明；

實際情況時，Android更多的是調用遠端JS代碼，即将加載的JS代碼路徑改成url即可

需要加載JS代碼：javascript.html

// 文本名：javascript
<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</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) {
                // 通過Handler發送消息
                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;
            }

        });


    }
}

特别注意：JS代碼調用一定要在

onPageFinished（）

回調之後才能調用，否則不會調用。

onPageFinished() 屬于WebViewClient類的方法，主要在頁面加載結束時調用

方式2：通過 `WebView` 的 `evaluateJavascript（）`

優點：該方法比第一種方法效率更高、使用更簡潔。

因為該方法的執行不會使頁面重新整理，而第一種方法（loadUrl ）的執行則會。

Android 4.4 後才可使用

具體使用

// 隻需要将第一種方法的loadUrl()換成下面該方法即可
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此處為 js 傳回的結果
        }
    });
}

2.1.2 方法對比

2.1.3 使用建議

兩種方法混合使用，即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 傳回的結果
        }
    });
}

2.2 JS通過WebView調用 Android 代碼

對于JS調用Android代碼的方法有3種：

通過 WebView 的 addJavascriptInterface（） 進行對象映射
通過 WebViewClient 的 shouldOverrideUrlLoading () 方法回調攔截 url
通過 WebChromeClient 的 onJsAlert() 、 onJsConfirm() 、 onJsPrompt（） 方法回調攔截JS對話框 alert() 、 confirm() 、 prompt（） 消息

2.2.1 方法分析

方式1：通過

WebView

的

addJavascriptInterface（）

進行對象映射

步驟1：定義一個與JS對象映射關系的Android類：AndroidtoJs

AndroidtoJs.java（注釋已經非常清楚）

// 繼承自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" "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");

特點

優點：使用簡單

僅将Android對象和JS對象映射即可

缺點：存在嚴重的漏洞問題，具體請看文章：你不知道的 Android WebView 使用漏洞

方式2：通過 `WebViewClient` 的方法 `shouldOverrideUrlLoading ()` 回調攔截 url

具體原理：

Android通過 WebViewClient 的回調方法 shouldOverrideUrlLoading () 攔截 url
解析該 url 的協定
如果檢測到是預先約定好的協定，就調用相應方法

即JS需要調用Android的方法

具體使用：

步驟1：在JS約定所需要的Url協定

JS代碼：javascript.html

以.html格式放到src/main/assets檔案夾裡

<!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" "callAndroid()">點選調用Android代碼</button>
   </body>
</html>

當該JS通過Android的

mWebView.loadUrl("file:///android_asset/javascript.html")

加載後，就會回調

shouldOverrideUrlLoading （）

，接下來繼續看步驟2：

步驟2：在Android通過WebViewClient複寫

shouldOverrideUrlLoading （）

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);

        // 步驟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);
                                      }
                                  }
        );
   }
        }

特點

優點：不存在方式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（）

消息

在JS中，有三個常用的對話框方法：

方式3的原理：Android通過

WebChromeClient

的

onJsAlert()

、

onJsConfirm()

、

onJsPrompt（）

方法回調分别攔截JS對話框

（即上述三個方法），得到他們的消息内容，然後解析即可。

下面的例子将用**攔截 JS的輸入框（即

prompt（）

方法）**說明：

常用的攔截是：攔截 JS的輸入框（即 prompt（） 方法）

因為隻有 prompt（） 可以傳回任意類型的值，操作最全面友善、更加靈活；而alert（）對話框沒有傳回值；confirm（）對話框隻能傳回兩種狀态（确定 / 取消）兩個值

步驟1：加載JS代碼，如下：

javascript.html

以.html格式放到src/main/assets檔案夾裡

<!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" "clickprompt()">點選調用Android代碼</button>
   </body>
</html>

當使用

mWebView.loadUrl("file:///android_asset/javascript.html")

加載了上述JS代碼後，就會觸發回調

onJsPrompt（）

，具體如下：

如果是攔截警告框（即 alert() ），則觸發回調 onJsAlert（） ；

如果是攔截确認框（即 confirm() ），則觸發回調 onJsConfirm（） ；

步驟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);
                                        }
                                    }
        );


            }

        }

Demo位址

上述所有代碼均存放在：Carson_Ho的Github位址： WebView Demo

2.2.2 三種方式的對比 & 使用場景

3. 總結

本文主要對Android通過WebView與JS的互動方式進行了全面介紹

關于WebView的系列文章對你有所幫助

Android開發：最全面、最易懂的Webview詳解

Android：你不知道的 WebView 使用漏洞

手把手教你建構 Android WebView 的緩存機制 & 資源預加載方案

Android：WebView與 JS 互動方式前言1. 互動方式總結2. 具體分析方式2：通過WebView的evaluateJavascript（）2.2 JS通過WebView調用 Android 代碼特點方式2：通過 WebViewClient 的方法shouldOverrideUrlLoading ()回調攔截 url特點3. 總結

前言

1. 互動方式總結

2. 具體分析

2.1 Android通過WebView調用 JS 代碼

方式1：通過 `WebView` 的 `loadUrl（）`

方式2：通過 `WebView` 的 `evaluateJavascript（）`

2.1.2 方法對比

2.1.3 使用建議

2.2 JS通過WebView調用 Android 代碼

2.2.1 方法分析

特點

方式2：通過 `WebViewClient` 的方法 `shouldOverrideUrlLoading ()` 回調攔截 url

特點

2.2.2 三種方式的對比 & 使用場景

3. 總結

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯

Android：WebView與 JS 互動方式前言1. 互動方式總結2. 具體分析方式2：通過WebView的evaluateJavascript（）2.2 JS通過WebView調用 Android 代碼特點方式2：通過 WebViewClient 的方法shouldOverrideUrlLoading ()回調攔截 url特點3. 總結

前言

1. 互動方式總結

2. 具體分析

2.1 Android通過WebView調用 JS 代碼

方式1：通過 WebView 的 loadUrl（）

方式2：通過 WebView 的 evaluateJavascript（）

2.1.2 方法對比

2.1.3 使用建議

2.2 JS通過WebView調用 Android 代碼

2.2.1 方法分析

特點

方式2：通過 WebViewClient 的方法 shouldOverrideUrlLoading () 回調攔截 url

特點

2.2.2 三種方式的對比 & 使用場景

3. 總結

繼續閱讀

方式1：通過 `WebView` 的 `loadUrl（）`

方式2：通過 `WebView` 的 `evaluateJavascript（）`

方式2：通過 `WebViewClient` 的方法 `shouldOverrideUrlLoading ()` 回調攔截 url