Android 原生和 JS 互動實踐

iceCola7發表於2019-02-17
AndroidJS

Android 與 JS 互動實際上是通過 WebView 互相呼叫方法：

  • Android 去呼叫 JS 的程式碼；
  • JS 去呼叫 Android 的程式碼。

一、JS 呼叫 Android 方法

方法一：通過 WebView 的 addJavascriptInterface() 進行物件對映

優點：使用簡單，僅將Android物件和JS物件對映即可

缺點：存在漏洞問題

1）允許 WebView 載入 JS

webView.getSettings().setJavaScriptEnabled(true);

2）編寫 JS 介面
public class JsInterface {
    private static final String TAG = "JsInterface";
    private JsBridge jsBridge;
    public JsInterface(JsBridge jsBridge) {
        this.jsBridge = jsBridge;
    }
    /**
     * 這個方法由 JS 呼叫， 不在主執行緒執行
     *
     * @param value
     */
    @JavascriptInterface
    public void callAndroid(String value) {
        Log.i(TAG, "value = " + value);
        jsBridge.setTextValue(value);
    }
}
複製程式碼
3）給 WebView 新增 JS 介面

webView.addJavascriptInterface(new JsInterface(this), "launcher");// 此處的 launcher 可以自定義，最終是 JS 中要使用的物件

4）JS 程式碼中呼叫 Java 方法
if (window.launcher){ // 判斷 launcher 物件是否存在
	// 此處的 launcher 要和 第3步中定義的 launcher 保持一致
    // JS 呼叫 Android 的方法
    launcher.callAndroid(str);
}else{
    alert("launcher not found!");
}
複製程式碼

方法二：通過 WebViewClient 的 shouldOverrideUrlLoading() 方法回撥攔截 url

優點：不存在方式一的漏洞；

缺點：JS獲取Android方法的返回值複雜。

1）JS 程式碼中，約定協議
function callAndroid(){
    // 約定的 url 協議為：js://webview?arg1=111&arg2=222
    document.location = "js://webview?arg1="+inputEle.value+"&arg2=222";
}
複製程式碼
2）Android 程式碼中，通過設定 WebViewClient 對協議進行攔截處理
webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 一般根據scheme（協議格式） & authority（協議名）判斷（前兩個引數）
        // 例如：url = "js://webview?arg1=111&arg2=222"
        Uri uri = Uri.parse(url);
        // 如果url的協議 = 預先約定的 js 協議
        if (uri.getScheme().equals("js")) {
            // 攔截url,下面JS開始呼叫Android需要的方法
            if (uri.getAuthority().equals("webview")) {
                // 執行JS所需要呼叫的邏輯
                Log.e("TAG", "JS 呼叫了 Android 的方法");
                Set<String> collection = uri.getQueryParameterNames();
                Iterator<String> it = collection.iterator();
                String result = "";
                while (it.hasNext()) {
                    result += uri.getQueryParameter(it.next()) + ",";
                }
                tv_result.setText(result);
            }
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});
複製程式碼

方法三：通過 WebChromeClient 的 onJsAlert() 、 onJsConfirm() 、 onJsPrompt（）方法回撥攔截 JS 對話方塊 alert() 、 confirm() 、 prompt（） 訊息

處理方式和方法二差不多

1）JS程式碼中，約定協議
// 呼叫 prompt()
var result=prompt("js://prompt?arg1="+inputEle.value+"&arg2=222");
alert("prompt：" + result);
複製程式碼
2）Android 程式碼中，通過設定 WebChromeClient 對協議進行攔截處理
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 一般根據scheme（協議格式） & authority（協議名）判斷（前兩個引數）
        // 例如：url = "js://webview?arg1=111&arg2=222"
        Uri uri = Uri.parse(message);
        Log.e("TAG", "----onJsPrompt--->>" + url + "," + message);
        // 如果url的協議 = 預先約定的 js 協議
        if (uri.getScheme().equals("js")) {
            // 攔截url,下面JS開始呼叫Android需要的方法
            if (uri.getAuthority().equals("prompt")) {
                // 執行JS所需要呼叫的邏輯
                Log.e("TAG", "JS 呼叫了 Android 的方法");
                Set<String> collection = uri.getQueryParameterNames();
                Iterator<String> it = collection.iterator();
                String result2 = "";
                while (it.hasNext()) {
                    result2 += uri.getQueryParameter(it.next()) + ",";
                }
                tv_result.setText(result2);
            }
            return true;
        }
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        Log.e("TAG", "----onJsAlert--->>" + url+ "," + message);
        return super.onJsAlert(view, url, message, result);
    }

    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        Log.e("TAG", "----onJsConfirm--->>" + url+ "," + message);
        return super.onJsConfirm(view, url, message, result);
    }
});
複製程式碼

二、 Android 呼叫 JS 方法

方法一： 通過 WebView 的 loadUrl()

1）編寫 JS 方法
var callJS = function(str){
    inputEle.value = str;
}
複製程式碼
2）使用 webView.loadUrl() 呼叫 JS 方法
// Android 呼叫 JS 方法
webView.loadUrl("javascript:if(window.callJS){window.callJS('" + str + "');}");
複製程式碼

方法二： 通過 WebView 的 evaluateJavascript()

  • 該方法比第一種方法效率更高，使用更簡潔；
  • 該方法執行不會重新整理頁面，而第一種方法（ loadUrl ）則會；
  • Android 4.4 以後才能使用。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    webView.evaluateJavascript("javascript:if(window.callJS){window.callJS('" + str + "');}", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            Log.e("TAG", "--------->>" + value);
        }
    });
}
複製程式碼

最後附上原始碼地址：github.com/iceCola7/Js…

相關文章