快捷導(dǎo)航

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

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

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

Android調(diào)用js的方法實現(xiàn)是引入一個webview用webview打開一個頁面調(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類對象映射到j(luò)s的test對象
    mWebView.loadUrl("file:///android_asset/javascript.html");
    //SetWebChromeClient()//處理JS調(diào)用Android函數(shù)的方法在第二部分解釋

}

首先先初始化webview

第二步對webview基本初始化

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

其余有明確注釋

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

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

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

下面是javascript.html文件我們在引入文件時需要將文件放到所在的Android項目的/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)用過文件了
    </h1>
    <button onclick="callJS()">調(diào)用彈窗</button>
    <button type="button" id="button1" onclick="callAndroid()">點擊調(diào)用Android代碼</button>
    <button type="button" id="button2" onclick="clickprompt()">點擊調(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(){
        // 由于對象映射，所以調(diào)用test對象等于調(diào)用Android映射的對象
            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è)置了彈窗檢驗調(diào)用結(jié)果,所以需要支持js對話框
    // webview只是載體，內(nèi)容的渲染需要使用webviewChromClient類去實現(xiàn)
    // 通過設(shè)置WebChromeClient對象處理JavaScript的對話框
    //設(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測試程序是否能通信。

private void InitView() {

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

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

                    // 注意調(diào)用的JS方法名要對應(yīng)上
                    // 調(diào)用javascript的callJS()方法
                    final int version = Build.VERSION.SDK_INT;//獲取系統(tǒng)版本
                    //我們需要判斷當前系統(tǒng)版本。為了盡可能減少錯誤我們使用了兩種方式來實現(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()同時取消注mWebView.addJavascriptInterface(new AndroidtoJs(), "test");重新創(chuàng)建一個類繼承于Object同時創(chuàng)建的test對象在js中同樣如此像HTML文件中的

function callAndroid(){
        // 由于對象映射，所以調(diào)用test對象等于調(diào)用Android映射的對象
            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之間通信的在下邊有詳細解釋

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é)議名）判斷（前兩個參數(shù)）
        //假定傳入進來的 url = "js://demo?arg1=111&arg2=222"（同時也是約定好的需要攔截的）

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

    // 通過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);
    }
    }
    );
}

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

第一次接觸Android項目有的地方寫的可能有問題有的地方說的也可不能不準確，大家下方積極留言，第一次寫博客排版也沒搞好大家見諒吧哈哈哈哈。

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

您可能感興趣的文章: