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

時間  2019-11-07
標籤 android 時候 掌握 webview 交互 技術 欄目 Android 简体版
原文   原文鏈接

前言

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

界面展現

圖中的上半部分是android原生界面，下半部分是webview加載html的頁面，能夠看到，兩邊能夠相互傳遞參數，而且調用對方的代碼塊了。下面我把完成的代碼先貼出來，有基礎的同窗能夠直接copy源碼而後本身調試看看，沒基礎的同窗別急，聽我一個一個解析。html

Android調用Js

經過WebView有loadUrl()和evaluateJavascript()兩種方法調用Js方法。前端

這裏採用加載本地assets中的html文件進行調試java

一、loadUrl() 方式

JsMethod.htmlandroid

<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的方法回傳參數。git

MainActivity.javagithub

...
    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");
    }
...
複製代碼

調用Jsweb

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

二、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()。ide

須要注意的是，evaluateJavascript()只能在android 4.4以後才能調用。

Js調用Android

Js經過WebView有三種方式調用android方法

一、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註釋過的方法。

二、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端的代碼量。

三、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交互。

源碼地址

源碼已經集成文中的回調方式，感興趣的同窗能夠看下。

最後附上一句「雞湯」，但願你們能時刻讓本身保持堅強，晚安。

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程