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

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

Android 去调用JS 的代码

通过WebView的loadUrl()

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

android_load_js.html

                         Android调用 JS 代码demo  // 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

                         DEMO                          //点击按钮则调用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

                         DEMO                          //点击按钮则调用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代码
```
                         DEMO                          //点击按钮则调用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

Android 去调用JS 的代码

JS 去调用 Android的代码

更多相关文章

随机推荐