Android：是時候掌握WebView與Js的交互技術(shù)了

前言

現(xiàn)在業(yè)務(wù)稍微大一點的公司，基本上都會引入android與H5交互的方式開發(fā)，或者是引入Hybrid框架，更有甚者直接全部采用Js開發(fā)成Web App形式，就是看中其開發(fā)成本更低(跨平臺)，更新風(fēng)險更小的優(yōu)勢。目前移動端開發(fā)市場的遇冷，除了android初級人才過多之外，還有就是前端技術(shù)的崛起，擠占了native開發(fā)的空間，不過仔細想想，在互聯(lián)網(wǎng)的意義上，移動端的App其實也屬于前端。。。所以順應(yīng)技術(shù)的浪潮，擁抱變化才能使自己立于不敗之地。附上源碼地址

界面展示

JsToJava.gif

圖中的上半部分是android原生界面，下半部分是webview加載html的頁面，可以看到，兩邊可以相互傳遞參數(shù)，并且調(diào)用對方的代碼塊了。下面我把完成的代碼先貼出來，有基礎(chǔ)的同學(xué)可以直接copy源碼然后自己調(diào)試看看，沒基礎(chǔ)的同學(xué)別急，聽我一個一個解析。

Android調(diào)用Js

通過WebView有loadUrl()和evaluateJavascript()兩種方法調(diào)用Js方法。

這里采用加載本地assets中的html文件進行調(diào)試

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">調(diào)用結(jié)果</h3>

    </body>

</html>

window.android.JsToJavaInterface(s)是Js調(diào)用android的方法，由于loadUrl()不能從Js返回數(shù)據(jù)，可以讓Js回調(diào)android的方法回傳參數(shù)。

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");
    }
...

調(diào)用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">調(diào)用結(jié)果</h3>

    </body>

</html>

調(diào)用Js

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

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

需要注意的是，evaluateJavascript()只能在android 4.4之后才能調(diào)用。

Js調(diào)用Android

Js通過WebView有三種方式調(diào)用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">調(diào)用結(jié)果</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調(diào)用Java的方法分離出來到一個JavaMethod類中，然后通過Looper.getMainLooper()獲取主線程Handler，統(tǒng)一采用接口形式更新界面。

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對象后，可以調(diào)用到其他系統(tǒng)方法，為了避免這個漏洞，在4.2之后，只能調(diào)用到@JavascriptInterface注釋過的方法。

2、shouldOverrideUrlLoading

通過WebViewClient中的shouldOverrideUrlLoading攔截url，制定一個對應(yīng)協(xié)議。

<html>

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

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

    <body>

        <h3>Js Method</h3>
        <h3 id="textshow">調(diào)用結(jié)果</h3>
        
        <input type="button" value="shouldOverrideUrlLoading" onclick="document.location = 'js://jstojava?arg1=1號參數(shù)&arg2=2號參數(shù)'"/>

    </body>

</html>

JavaMethod.java

...
    public WebViewClient getWebViewClient() {
        WebViewClient webViewClient = new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Uri uri = Uri.parse(url);
                // 一般根據(jù)scheme(協(xié)議格式) & authority(協(xié)議名)判斷
                // 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");
    }
...

這種方式?jīng)]有版本限制和漏洞，不過沒有返回值，如果Js調(diào)用后需要android返回就得使用loadUrl()或者evaluateJavascript()回傳對應(yīng)的接收方法了。值得一提的是，這種方式便于和IOS通用一套協(xié)議，簡便Js端的代碼量。

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

通過 WebChromeClient 中的onJsAlert()、onJsConfirm()、onJsPrompt()攔截Js中的alert()、confirm()、prompt() 消息。而alert、confirm、prompt代表Js中三種常用提示框，第一種沒有返回值，第二種返回布爾值，第三種可返回任意值。由于考慮到靈活性，所以我們可以直接實現(xiàn)對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">調(diào)用結(jié)果</h3>
        
        <input type="button" value="onJsPrompt" onclick="jstojavaprompt('js://jstojava?arg3=3號參數(shù)&arg4=4號參數(shù)')"/>

    </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");
    }
...

協(xié)議的方式與shouldOverrideUrlLoading攔截url時類似，在對應(yīng)線程處理完業(yè)務(wù)后，可將結(jié)果通過result.confirm()返回給Js。

總結(jié)

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

源碼地址

源碼已經(jīng)集成文中的回調(diào)方式，感興趣的同學(xué)可以看下。

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

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容