快捷導(dǎo)航

Android與JS相互調(diào)用的方法

更新時(shí)間：2021年04月22日 08:47:03 作者：Tyro

這篇文章主要介紹了Android與JS相互通信的方法，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下

Android調(diào)用js的方法實(shí)現(xiàn)是引入一個(gè)webview用webview打開一個(gè)頁(yè)面調(diào)取的JS函數(shù)。

private void InitWebView() {
    mWebView = (WebView) findViewById(R.id.webview);

    WebSettings webSettings = mWebView.getSettings();

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

    //把js彈窗轉(zhuǎn)化成安卓彈窗
    SetJavaScriptAlertEnable();

    // 先載入html代碼
    // 格式規(guī)定為:file:///android_asset/文件名.html
    // 只需要將第一種方法的loadUrl()換成下面該方法即可
    // Android版本變量
    //mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS類對(duì)象映射到j(luò)s的test對(duì)象
    mWebView.loadUrl("file:///android_asset/javascript.html");
    //SetWebChromeClient()//處理JS調(diào)用Android函數(shù)的方法在第二部分解釋

}

首先先初始化webview

第二步對(duì)webview基本初始化

第三部設(shè)置JS交互權(quán)限

其余有明確注釋

loadurl是加載html網(wǎng)頁(yè)端的

我們以button點(diǎn)擊開始執(zhí)行js事件為例

首先app/src/main下創(chuàng)建assets文件

下面是javascript.html文件我們?cè)谝胛募r(shí)需要將文件放到所在的Android項(xiàng)目的/project_home/app/src/main/assets/javascript.html 下就可以使用了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Carson_Ho</title>
    <h1 id="ip">
        你好這里已經(jīng)調(diào)用過(guò)文件了
    </h1>
    <button onclick="callJS()">調(diào)用彈窗</button>
    <button type="button" id="button1" onclick="callAndroid()">點(diǎn)擊調(diào)用Android代碼</button>
    <button type="button" id="button2" onclick="clickprompt()">點(diǎn)擊調(diào)用Androidtest代碼</button>
    <script>
        function callJS() {
            alert("Android調(diào)用了JS的callJS方法");
        }

        function change() {
            document.getElementById('ip').innerText = "真的難啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊a";
        }
        function clickprompt(){
            var result=prompt("js://demo?arg1=111&arg2=222");
            alert("demo " + result);
        }
        function callAndroid(){
        // 由于對(duì)象映射，所以調(diào)用test對(duì)象等于調(diào)用Android映射的對(duì)象
            test.hello("js調(diào)用了android中的hello方法");
         }

    </script>

    // JS代碼
    <script src="./1/roslib.min.js"></script>
    <script src="./1/RoboX.js"></script>

</head>

</html>

將JS彈窗改為Android彈窗方法SetJavaScriptAlertEnable();

private void SetJavaScriptAlertEnable() {
    // 由于設(shè)置了彈窗檢驗(yàn)調(diào)用結(jié)果,所以需要支持js對(duì)話框
    // webview只是載體，內(nèi)容的渲染需要使用webviewChromClient類去實(shí)現(xiàn)
    // 通過(guò)設(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) {
        //設(shè)置彈窗
            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(true);
            b.create().show();
            return true;
        }
    });
}

初始化界面用button測(cè)試程序是否能通信。

private void InitView() {

    button = (Button) findViewById(R.id.button);

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 通過(guò)Handler發(fā)送消息
            mWebView.post(new Runnable() {
                @Override
                public void run() {

                    // 注意調(diào)用的JS方法名要對(duì)應(yīng)上
                    // 調(diào)用javascript的callJS()方法
                    final int version = Build.VERSION.SDK_INT;//獲取系統(tǒng)版本
                    //我們需要判斷當(dāng)前系統(tǒng)版本。為了盡可能減少錯(cuò)誤我們使用了兩種方式來(lái)實(shí)現(xiàn)調(diào)用JS方法。
                    if (version < 18) {
                        mWebView.loadUrl("javascript:callJS()");
                    } else {
                            
//                            Toast.makeText(getApplicationContext(), "單擊完成", Toast.LENGTH_SHORT).show();
                            

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

        }
    });
}

下面是JS同Android的通信，JS調(diào)用Android的函數(shù)方法。

將上邊webview初始化中取消注釋SetWebChromeClient()同時(shí)取消注mWebView.addJavascriptInterface(new AndroidtoJs(), "test");重新創(chuàng)建一個(gè)類繼承于Object同時(shí)創(chuàng)建的test對(duì)象在js中同樣如此像HTML文件中的

function callAndroid(){
        // 由于對(duì)象映射，所以調(diào)用test對(duì)象等于調(diào)用Android映射的對(duì)象
            test.hello("js調(diào)用了android中的hello方法");
         }

下面是創(chuàng)建的類AndroidtoJS

import android.webkit.JavascriptInterface;

public class AndroidtoJs extends Object {
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS調(diào)用了Android的hello方法woc");
    }
}

SetWebChromeClient()是處理JS和Android之間通信的在下邊有詳細(xì)解釋

private void SetWebChromeClient() {
    mWebView.setWebChromeClient(new WebChromeClient() {
    // 攔截輸入框(原理同方式2)
    // 參數(shù)message:代表promt（）的內(nèi)容（不是url）
    // 參數(shù)result:代表輸入框的返回值
    @RequiresApi(api = Build.VERSION_CODES.HONEYCOMB)
    @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)來(lái)的 url = "js://demo?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("demo")) {

                //
                // 執(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);
    }

    // 通過(guò)alert()和confirm()攔截的原理相同，此處不作過(guò)多講述
    // 攔截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);
    }
    }
    );
}

我們不是采用直接調(diào)用的方法而是采用攔截的方法

第一次接觸Android項(xiàng)目有的地方寫的可能有問(wèn)題有的地方說(shuō)的也可不能不準(zhǔn)確，大家下方積極留言，第一次寫博客排版也沒(méi)搞好大家見諒吧哈哈哈哈。

以上就是Android與JS相互通信的方法的詳細(xì)內(nèi)容，更多關(guān)于Android與JS相互通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: