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并且得到返回值