Android WebView 与JS的数据交互

1.Android调用JS代码的方法有2种

通过WebView的loadUrl通过WebView的evaluateJavascript java 公共代码 WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true);// 设置与Js交互的权限 webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗 mWebView.loadUrl("file:///android_asset/***.html");

htm代码

<script> function callJS(){} //无参数 function callJS(param1){} //1个参数 function callJS(param1, param2){} //2哥参数 </script>

loadUrl方式

调用javascript的callJS()方法 mWebView.loadUrl("javascript:callJS()"); mWebView.loadUrl("javascript:callJS('" + param1 + "')"); mWebView.loadUrl("javascript:callJS('" + param1 + "','" + param2 + "')";

特别注意：JS代码调用一定要在 onPageFinished（） 回调之后才能调用，否则不会调用。

evaluateJavascript方式

// 只需要将第一种方法的loadUrl()换成下面该方法即可 mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { //此处为 js 返回的结果 } }); }

方法对比

注意

evaluateJavascript该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断loadUrl需要再次调用loadUrl才能给js回调返回值

2.JS调用Android代码的方法有3种：

通过WebView 的 addJavascriptInterface进行对象映射通过 WebViewClient 的 shouldOverrideUrlLoading 方法回调拦截 url通过 WebChromeClient 的 onJsAlert、onJsConfirm、onJsPrompt方法回调拦截JS对话框 alert、confirm、prompt 消息

通过WebView 的 addJavascriptInterface进行对象映射

定义一个数据回调接口类

public interface AndroidtoJsResponseCallback { public void previewPicture(String url); public void lookAttachment(String url); }

定义一个与JS对象映射关系的Android类：AndroidtoJs

// 继承自Object类 public class AndroidtoJs extends Object{ private AndroidtoJsResponseCallback mResponseCallback; public AndroidtoJs(AndroidtoJsResponseCallback responseCallback) { mResponseCallback = responseCallback; } // 定义JS需要调用的方法 // 被JS调用的方法必须加入@JavascriptInterface注解 @JavascriptInterface public void previewPicture(String url) { mResponseCallback.previewPicture(url); } @JavascriptInterface public void lookAttachment(String url) { mResponseCallback.lookAttachment(url); } }

建立android与js通信桥梁

webView.addJavascriptInterface(new AndroidtoJs(new AndroidtoJsResponseCallback() { @Override public void previewPicture(String url) { } @Override public void lookAttachment(String url) { } }), "JsBridge");

html调用android代码

<script> function callAndroid(){ // 由于对象映射，所以调用JsBridge对象等于调用Android映射的对象 JsBridge.previewPicture("");//这样调用可以 window.JsBridge.previewPicture("");//加window也可以 } </script>

JavaScript Window 对象 Window 对象 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 甚至 HTML DOM 的 document 也是 window 对象的属性之一：

注意：

android4.2以下版本存在漏洞问题，具体请看文章：你不知道的 Android WebView 使用漏洞

通过 WebViewClient 的 shouldOverrideUrlLoading 方法回调拦截 url

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

其他2种详见文章Android：你要的WebView与 JS 交互方式 都在这里了，这里不做具体介绍了

参考： Android：你要的WebView与 JS 交互方式 都在这里了

如何在js调用java方法并取回返回值

Android - webview原生调用js并且得到返回值