android js交互总结

本篇博客总结开发中与webview交互实现

交互大体上分为三类：

1. 通过 mWebView.loadUrl(“javascript:方法名()”);调取js函数。
2. 通过mWebView.addJavascriptInterface(new java类(), “js函数object”);调取java方法。
3. 通过WebChromeClient()或者WebViewClient()重写相应方法来实现。

1、调取js函数实现

调取js时要注意：

1. setJavaScriptEnabled(true);支持js。
2. mWebView.loadUrl(“javascript:callJsWithParams(‘” + value + “’)”);参数value经过String格式化。
   例如：
   mWebView.loadUrl(“javascript:callJsWithParams(zyc123)”);这样调是不执行的，要将值格式化才可以，这样写
   mWebView.loadUrl(“javascript:callJsWithParams(‘zyc123’)”); 或者
   String value = “大超dc123”；
   mWebView.loadUrl(“javascript:callJsWithParams(‘” + value + “’)”);

示例代码:

WebView mWebView = (WebView) findViewById(R.id.wv_call);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
mWebView.loadUrl("file:///android_asset/AndroidJs/index.html");
//调取js代码
String value = "我是参数,dcdc";
mWebView.loadUrl("javascript:callJsWithParams('" + value + "')");

2、调取java方法

调取java注意：

1. mWebView.addJavascriptInterface(new jsCall(), “callAndr”);
   第一个参数java对象注入js上下文，第二个参数用于js对象的暴露。简单说就是，第一个是java对象，第二个是js对象。
2. 在java对象的方法中必须添加@JavascriptInterface注解才可以由js对象callAndr成功调起java方法。在android4.2之前的系统中安全性则更低。

示例代码:

java代码：

  // 注入对象
  mWebView.addJavascriptInterface(new jsCall(), "callAndr");

 // 调取的java类方法 
 public class jsCall {

        @JavascriptInterface
        public void callAndroid(String ss) {
            //发到主线程来处理
            processShow(ss,1);
        }
    }

private void processShow(String message, int p) {
        Message msg = new Message();
        msg.what = what;
        msg.obj = message;
        msg.arg1 = p;
        mHandler.sendMessage(msg);
    }

  Handler mHandler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case what:
                    String obj = (String) msg.obj;
                    int arg1 = msg.arg1;
                    switch (arg1){
                        case 1:
                            tv_call_android.setText(obj);
                            break;
                    }
            }
        }
}

Html代码：

    <!--JS调android方法-->
        <div id="dv_03" style="margin-top: 40px;">
            <button id="bt_03" style="margin-right: 20px;" type="button"onclick="callAndroid()">点我调android</button>
        </div>

// call android
function callAndroid(){
    //改变button內容
    var bt_03 = document.getElementById("bt_03");
    bt_03.innerHTML = "js call android"
    //调android方法
    window.callAndr.callAndroid(bt_03.innerHTML);
}

3、通过alert、confirm、prompt来实现交互

只需要继承WebChromeClient类重写响应的方法即可

代码示例

HTML代码：

<!--JS alert-->
        <div id="dv_04" style="margin-top: 40px;">
            <button id="bt_04" style="margin-right: 20px;" type="button" onclick="alertCallAndroid()">点我调android</button>
        </div>
        <!--JS confirm-->
        <div id="dv_05" style="margin-top: 40px;">
            <button id="bt_05" style="margin-right: 20px;" type="button" onclick="confirmCallAndroid()">点我调android</button>
        </div>
        <!--JS prompt-->
        <div id="dv_06" style="margin-top: 40px;">
            <button id="bt_06" style="margin-right: 20px;" type="button" onclick="promptCallAndroid()">点我调android</button>
        </div>

//JS alert
function alertCallAndroid(){
        //改变button內容
        var bt_04 = document.getElementById("bt_04");
        bt_04.innerHTML = "js alert"
        //调android方法
        alert(bt_04.innerHTML);
}

//JS confirm
function confirmCallAndroid(){
        //改变button內容
        var bt_05 = document.getElementById("bt_05");
        bt_05.innerHTML = "js confirm"
        //调android方法
        confirm(bt_05.innerHTML);
}

//JS prompt
function promptCallAndroid(){
        //改变button內容
        var bt_06 = document.getElementById("bt_06");
        bt_06.innerHTML = "js prompt"
        //调android方法
        prompt(bt_06.innerHTML);
}

Java代码：

mWebView.setWebChromeClient(new MyWebChromeClient());
 public class MyWebChromeClient extends WebChromeClient {

        //alert 拦截
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            processShow(message,2);
            return super.onJsAlert(view, url, message, result);
        }

        //confirm 拦截
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            processShow(message,3);
            return super.onJsConfirm(view, url, message, result);
        }

        //prompt 拦截
        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
            processShow(message,4);
            return super.onJsPrompt(view, url, message, defaultValue, result);
        }
    }

通过shouldOverrideUrlLoading()来解析url实现交互

注意

API 5.0以上推荐使用public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {},request可以获取到url,method以及请求头header:

  Uri url = request.getUrl();
  String method = request.getMethod();
  Map<String, String> requestHeaders = request.getRequestHeaders();

public boolean shouldOverrideUrlLoading(WebView view, String url) {}方法则不可以。

示例代码

<!--JS url-->
        <div id="dv_07" style="margin-top: 40px;">
            <button id="bt_07" style="margin-right: 20px;" type="button" onclick="urlCallAndroid()">点我调android</button>
        </div>
//JS url
function urlCallAndroid(){
        //改变button內容
        var bt_07 = document.getElementById("bt_07");
        bt_07.innerHTML = "js url"
        //调android方法
        document.location.href = "http://www.junlangkj.com";
}

 mWebView.setWebViewClient(new MyWebViewClient());

 public class MyWebViewClient extends WebViewClient {

        //SDK >= 5.0 可以用这个代替旧版本的
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            Uri url = request.getUrl();
            processShow(url.toString(),5);
            String method = request.getMethod();
            Map<String, String> requestHeaders = request.getRequestHeaders();
            return super.shouldOverrideUrlLoading(view, request);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
                processShow(url,5);
            }
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

ok,是不是很简单，好了，最后附上源码。

源码在此