Android：是時候掌握WebView與Js的互動技術了

LeviWGG發表於2018-02-11
AndroidWebViewJS

前言

現在業務稍微大一點的公司，基本上都會引入android與H5互動的方式開發，或者是引入Hybrid框架，更有甚者直接全部採用Js開發成Web App形式，就是看中其開發成本更低(跨平臺)，更新風險更小的優勢。目前移動端開發市場的遇冷，除了android初級人才過多之外，還有就是前端技術的崛起，擠佔了native開發的空間，不過仔細想想，在網際網路的意義上，移動端的App其實也屬於前端。。。所以順應技術的浪潮，擁抱變化才能使自己立於不敗之地。附上原始碼地址

介面展示

Android：是時候掌握WebView與Js的互動技術了

圖中的上半部分是android原生介面，下半部分是webview載入html的頁面，可以看到，兩邊可以相互傳遞引數，並且呼叫對方的程式碼塊了。下面我把完成的程式碼先貼出來，有基礎的同學可以直接copy原始碼然後自己除錯看看，沒基礎的同學別急，聽我一個一個解析。

Android呼叫Js

通過WebView有loadUrl()和evaluateJavascript()兩種方法呼叫Js方法。

這裡採用載入本地assets中的html檔案進行除錯

1、loadUrl() 方式

JsMethod.html

<html>

    <head>
        <meta http-equiv="Content-Type" charset="UTF-8"/>

        <script type="text/javascript">
            var s = '我來自Js方法';
            function javatojscallback(param){
                 document.getElementById("textshow").innerHTML = (param);
                 //window.android.JsToJavaInterface(s)
            }
        </script>
    </head>

    <body>

        <h3>Js Method</h3>
        <h3 id="textshow">呼叫結果</h3>

    </body>

</html>
複製程式碼

window.android.JsToJavaInterface(s)是Js呼叫android的方法，由於loadUrl()不能從Js返回資料，可以讓Js回撥android的方法回傳引數。

MainActivity.java

...
    private void initView() {
        javaMethod = new JavaMethod(this);
        webView = new WebView(this);
        WebSettings settings = webView.getSettings();
        settings.setDomStorageEnabled(true);
        settings.setJavaScriptEnabled(true);
        settings.setBlockNetworkImage(false);
        frameLayout.addView(webView);
        webView.loadUrl("file:///android_asset/JsMethod.html");
    }
...
複製程式碼

呼叫Js

webView.loadUrl("javascript:javatojscallback('我來自Java')");
複製程式碼

2、evaluateJavascript()

<html>

    <head>
        <meta http-equiv="Content-Type" charset="UTF-8"/>

        <script type="text/javascript">
            var s = '我來自Js方法';
            function javatojswith(param){
                 document.getElementById("textshow").innerHTML = (param);
                 return s;
            }
        </script>
    </head>

    <body>

        <h3>Js Method</h3>
        <h3 id="textshow">呼叫結果</h3>

    </body>

</html>
複製程式碼

呼叫Js

    webView.evaluateJavascript("javascript:javatojswith('我來自Java')",
            new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            textShow.setText(s);
        }
    });
複製程式碼

相信已經大家已經注意到，被呼叫的Js方法是有返回值的，如果是採用loadUrl()呼叫，返回值也會用loadUrl()載入，直接顯示在WebView上，這顯然是不對的，我們只想隱形的接收返回值，而evaluateJavascript()就提供了這樣的隱形接收方式，不會呼叫到loadUrl()。

需要注意的是，evaluateJavascript()只能在android 4.4之後才能呼叫。

Js呼叫Android

Js通過WebView有三種方式呼叫android方法

1、addJavascriptInterface

<html>

    <head>
        <meta http-equiv="Content-Type" charset="UTF-8"/>

        <script type="text/javascript">
        </script>
    </head>

    <body>

        <h3>Js Method</h3>
        <h3 id="textshow">呼叫結果</h3>
        
        <input type="button" value="JavascriptInterface" onclick="window.android.JsToJavaInterface('我來自Js')"/>

    </body>

</html>
複製程式碼

JavaMethod.java

public class JavaMethod {
    private MainActivity mainActivity;
    private Handler uiHandler;

    public JavaMethod(MainActivity mainActivity) {
        this.mainActivity = mainActivity;
        uiHandler = new Handler(Looper.getMainLooper());
    }

    @JavascriptInterface
    public void JsToJavaInterface(final String param) {
        uiHandler.post(new Runnable() {
            @Override
            public void run() {
                mainActivity.setTextShow("from JavaInterface: " + param);
            }
        });
    }
}
複製程式碼

這裡我把Js呼叫Java的方法分離出來到一個JavaMethod類中，然後通過Looper.getMainLooper()獲取主執行緒Handler，統一採用介面形式更新介面。

MainActivity.java

...
    private void initView() {
        ...
        settings.setJavaScriptEnabled(true);
        webView.addJavascriptInterface(javaMethod,"android");
        frameLayout.addView(webView);
        webView.loadUrl("file:///android_asset/JsMethod.html");
    }

    public void setTextShow(String str) {
        textShow.setText(str);
    }
...
複製程式碼

在android4.2之前有個嚴重漏洞，Js通過webview獲取android物件後，可以呼叫到其他系統方法，為了避免這個漏洞，在4.2之後，只能呼叫到@JavascriptInterface註釋過的方法。

2、shouldOverrideUrlLoading

通過WebViewClient中的shouldOverrideUrlLoading攔截url，制定一個對應協議。

<html>

    <head>
        <meta http-equiv="Content-Type" charset="UTF-8"/>

        <script type="text/javascript">
        </script>
    </head>

    <body>

        <h3>Js Method</h3>
        <h3 id="textshow">呼叫結果</h3>
        
        <input type="button" value="shouldOverrideUrlLoading" onclick="document.location = 'js://jstojava?arg1=1號引數&arg2=2號引數'"/>

    </body>

</html>
複製程式碼

JavaMethod.java

...
    public WebViewClient getWebViewClient() {
        WebViewClient webViewClient = new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Uri uri = Uri.parse(url);
                // 一般根據scheme(協議格式) & authority(協議名)判斷
                // url = "js://jstojava?arg1=1&arg2=2"
                if(uri.getScheme().equals("js")) {
                    if(uri.getAuthority().equals("jstojava")) {
                        final String param1 = uri.getQueryParameter("arg1");
                        final String param2 = uri.getQueryParameter("arg2");
                        uiHandler.post(new Runnable() {
                            @Override
                            public void run() {
                                mainActivity.setTextShow("arg1="+param1+" arg2="+param2);
                            }
                        });
                    }
                    return true;
                }

                return super.shouldOverrideUrlLoading(view, url);
            }
        };
        return webViewClient;
    }
...
複製程式碼

MainActivity.java

...
    private void initView() {
        javaMethod = new JavaMethod(this);
        webView = new WebView(this);
        WebSettings settings = webView.getSettings();
        settings.setDomStorageEnabled(true);
        settings.setJavaScriptEnabled(true);
        settings.setBlockNetworkImage(false);
        webView.setWebViewClient(javaMethod.getWebViewClient());
        webView.addJavascriptInterface(javaMethod,"android");
        frameLayout.addView(webView);
        webView.loadUrl("file:///android_asset/JsMethod.html");
    }
...
複製程式碼

這種方式沒有版本限制和漏洞，不過沒有返回值，如果Js呼叫後需要android返回就得使用loadUrl()或者evaluateJavascript()回傳對應的接收方法了。值得一提的是，這種方式便於和IOS通用一套協議，簡便Js端的程式碼量。

3、onJsAlert()、onJsConfirm()、onJsPrompt()

通過 WebChromeClient 中的onJsAlert()、onJsConfirm()、onJsPrompt()攔截Js中的alert()、confirm()、prompt() 訊息。而alert、confirm、prompt代表Js中三種常用提示框，第一種沒有返回值，第二種返回布林值，第三種可返回任意值。由於考慮到靈活性，所以我們可以直接實現對prompt的攔截即可。

<html>

    <head>
        <meta http-equiv="Content-Type" charset="UTF-8"/>

        <script type="text/javascript">
        function jstojavaprompt(param){
             result = prompt(param);
             document.getElementById("textshow").innerHTML = (result);
        }
        
        </script>
    </head>

    <body>

        <h3>Js Method</h3>
        <h3 id="textshow">呼叫結果</h3>
        
        <input type="button" value="onJsPrompt" onclick="jstojavaprompt('js://jstojava?arg3=3號引數&arg4=4號引數')"/>

    </body>

</html>
複製程式碼

JavaMethod.java

...
    public WebChromeClient getWebChromeClient() {
        WebChromeClient webChromeClient = new WebChromeClient(){
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
                Uri uri = Uri.parse(message);
                if(uri.getScheme().equals("js")) {
                    if(uri.getAuthority().equals("jstojava")) {
                        final String param3 = uri.getQueryParameter("arg3");
                        final String param4 = uri.getQueryParameter("arg4");
                        uiHandler.post(new Runnable() {
                            @Override
                            public void run() {
                                mainActivity.setTextShow("arg3="+param3+" arg4="+param4);
                                result.confirm("我來自onJsPrompt");
                            }
                        });
                    }
                    return true;
                }

                return super.onJsPrompt(view, url, message, defaultValue, result);
            }
        };
        return webChromeClient;
    }
...
複製程式碼

MainActivity.java

...
    private void initView() {
        javaMethod = new JavaMethod(this);
        webView = new WebView(this);
        WebSettings settings = webView.getSettings();
        settings.setDomStorageEnabled(true);
        settings.setJavaScriptEnabled(true);
        settings.setBlockNetworkImage(false);
        webView.setWebChromeClient(javaMethod.getWebChromeClient());
        webView.addJavascriptInterface(javaMethod,"android");
        frameLayout.addView(webView);
        webView.loadUrl("file:///android_asset/JsMethod.html");
    }
...
複製程式碼

協議的方式與shouldOverrideUrlLoading攔截url時類似，在對應執行緒處理完業務後，可將結果通過result.confirm()返回給Js。

總結

以上的互動方法各有利弊，主要是由於android版本的限制，沒有版本限制的方法稍顯麻煩，但是通用，一勞永逸，大家可以從業務覆蓋的機型來考慮引入哪種方式來與Js互動。

原始碼地址

原始碼已經整合文中的回撥方式，感興趣的同學可以看下。

最後附上一句“雞湯”，希望大家能時刻讓自己保持堅強，晚安。

生活不會為誰放慢節奏，我們只能提起精神，抹著淚，踉蹌著追上生活的步伐。

相關文章