Android WebView详解（二）：Android原生与JS互调

2019独角兽企业重金招聘Python工程师标准>>>

Android 去调用JS 的代码

• 通过WebView的loadUrl()

  先写一个html，很简单的一个代码，alert显示。

  android_load_js.html

    
    
       
          
          
    // JS代码
         
       
    
  

  在Activity中

    mWebSettings = mWebview.getSettings();
    //与JS交互开关
    mWebSettings.setJavaScriptEnabled(true);
    //设置允许JS弹窗	    
    mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    mWebview.loadUrl("file:///android_asset/android_load_js.html");
  
    //在这我用了一个TextView 点击事件中去调用JS中的方法
    beginLoading.setOnClickListener(new View.OnClickListener() {
        [@Override](https://my.oschina.net/u/1162528)
        public void onClick(View view) {
            //执行JS方法
      		mWebview.loadUrl("javascript:callJS()");
        }
    });
  
  
    mWebview.setWebChromeClient(new WebChromeClient() {
        //获取网站标题
        [@Override](https://my.oschina.net/u/1162528)
        public void onReceivedTitle(WebView view, String title) {
            System.out.println("标题在这里");
            mtitle.setText(title);
        }
  
        //获取加载进度
        [@Override](https://my.oschina.net/u/1162528)
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress < 100) {
                String progress = newProgress + "%";
                loading.setText(progress);
            } else if (newProgress == 100) {
                String progress = newProgress + "%";
                loading.setText(progress);
            }
        }
  
    	//由于设置了弹窗检验调用结果,所以需要支持js对话框
        //webview只是载体，内容的渲染需要使用webviewChromClient类去实现
        //通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数
        [@Override](https://my.oschina.net/u/1162528)
        public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
            AlertDialog.Builder b = new AlertDialog.Builder(TestActivity.this);
            b.setTitle("Alert");
            b.setMessage(message);
            b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                [@Override](https://my.oschina.net/u/1162528)
                public void onClick(DialogInterface dialog, int which) {
                    result.confirm();
                }
            });
            b.setCancelable(false);
            b.create().show();
            return true;
        }
    });
  

• 通过WebView的evaluateJavascript()

  该方法比第一种方法效率更高，因为该方法的执行不会使页面刷新，而第一种方法（loadUrl）的执行则会。该方法在Android 4.4 后才可使用，该方法在主线程执行

    //将上面webView.loadUrl("javascript:callJS()")替换为
    mWebview.evaluateJavascript("javascript:callJS()", new ValueCallback() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });	
  

  可以做一下兼容：

     if (Build.VERSION.SDK_INT > 18) {
        mWebview.evaluateJavascript("javascript:callJS()", new ValueCallback() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果
            }
        });
    } else {
        mWebview.loadUrl("javascript:callJS()");
    }
  

JS 去调用 Android的代码

• 通过WebView的addJavaScriptInterface()进行对象映射

  html

    
    
       
          
          
          
       
       
          //点击按钮则调用callAndroid函数
          
       
    
  

  映射的代码

    package org.professor.procartoon.temp;
  
    import android.webkit.JavascriptInterface;
  
    import org.professor.procartoon.utils.LogUtils;
  
    /**
     * Created by Caipeng on 2018.02.06.
     */
    public class JSObject {
  
    	/**
    	 * 定义JS需要调用的方法被JS调用的方法必须加入@JavascriptInterface注解
    	*/
        @JavascriptInterface
        public void showLog(String text) {
            LogUtils.i(text);
        }
    }
  

  在Activity中的测试代码

    mWebSettings.setJavaScriptEnabled(true);
    mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    //通过addJavascriptInterface()将Java对象映射到JS对象
    //参数1：Javascript对象名
    //参数2：Java对象名
    mWebview.addJavascriptInterface(new JSObject(),"test");
    mWebview.loadUrl("file:///android_asset/android_load_js.html");
  

• 通过WebViewClient的ShouldOverrideUrlLoading() 方法进行回调拦截

  Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url，解析该 url 的协议，如果检测到是预先约定好的协议，就调用Android相应的方法。

  html Document

    
    
       
          
          
          
       
       
          //点击按钮则调用callAndroid函数
           CallAndroid
       
    
  

  JAVA代码

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        //一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
        Uri uri = Uri.parse(request.getUrl().toString());
        if (uri.getScheme().equals("org")) {
            if (uri.getAuthority().equals("professor")) {
                LogUtils.i(uri.getQueryParameter("arg1"));
            }
            return true;
        }
  
        return super.shouldOverrideUrlLoading(view, request);
    }
  

  备注

  JS获取Android方法的返回值复杂。 如果JS想要得到Android方法的返回值，只能通过 WebView 的loadUrl （）去执行 JS 方法把返回值传递回去，相关的代码如下：

    //Android原生调用js
    mWebView.loadUrl("javascript:returnResult(" + result + ")");
  
    //需要在html中接收
    function returnResult(result){
        alert("result is" + result);
    }
  

• 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

  首先介绍下JS中的alert()、confirm()、prompt()三个方法

  • alert(),弹出警告窗,没有返回值，在文本加入\n可换行
  • confirm(),弹出确认框,两个返回值，返回布尔值，通过该值可以判断点击是确认还是取消(true表示点击了确认，false表示点击了取消)
  • prompt(),弹出输入框,任意设置返回值，点击确认返回输入框中的值，点击取消返回null

  原理：Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框 （即上面的三个方法），得到他们的消息内容，然后解析即可。

  常用的拦截是：拦截 JS的输入框（即prompt（）方法）。因为只有prompt（）可以返回任意类型的值，操作最全面方便、更加灵活；而alert（）对话框没有返回值；confirm（）对话框只能返回两种状态（确定 / 取消）两个值。

  html代码

    
    
       
          
          
          
       
       
          //点击按钮则调用callAndroid函数
           CallAndroid
       
    
  

  JAVA代码

    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
  
        //一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
        Uri uri = Uri.parse(url);
        if (uri.getScheme().equals("org")) {
            if (uri.getAuthority().equals("professor")) {
                LogUtils.i(uri.getQueryParameter("arg1"));
                //参数result:代表消息框的返回值(输入值)
                result.confirm("js调用了Android的方法成功啦");
            }
            return true;
        }
  
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
  

• 结语

  由上可以比较，根据第三种方式，即：通过WebChromeClient的方法拦截比较灵活一些

转载于:https://my.oschina.net/caipeng/blog/1619343