android与js的交互
android与js的交互在android开发中是很常见，一般是利用webView当作桥梁，进而实现android调用js，js调用android代码。下面就这两种待用具体记录一下。
android调用js代码
方式1，利用loadUrl
众所周知，webview加载网页时，使用是loadUrl()方法，例如我们加载本地的网页代码可以实现如下：
mWebView = findViewById(R.id.webview);
mWebView.loadUrl("file:///android_asset/html/Share.html");
当然，也可以用loadUrl加载非本地的网页，我们甚至还可以用loadUrl来运行js代码。
例如Share.html中的js代码如下：
function test() {
console.log("[share_debug] test");
}
那么，我们在加载完Share.html之后，我们就可以利用loadUrl来执行test方法了。代码如下：
mWebView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView webView, String s) {
super.onPageFinished(webView, s);
mWebView.loadUrl("javascript:test()");
}
});
这一段核心就只有一句loadUrl，调用他之后就会直接调用android代码。值得注意的时，用loadUrl只有在页面加载完了之后才能运行js代码，也就时在onPageFinished回调之后，否则不会调用到js代码,并且调用loadUrl会使得页面刷新。
方式2，利用evaluateJavascript
在android4.4之后，我们就可以通过evaluateJavascript来执行js代码了。还是以方式1中js中的test方法为例，androi端的调用就可以这么实现：
mWebView.evaluateJavascript（"javascript:test()", new ValueCallback() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
evaluateJavascript()方法执行之后，并不会使得页面刷新，所以他的执行效率比loadUrl要高，并且我们可以很方便的得到js执行的返回值，但是注意要兼容4.4以下的版本。
总结
使用建议：在能使用evaluateJavascript尽量使用evaluateJavascript,并使用loadUrl保证兼容性.
if(Build.VERSION.SDK_INT < 18) {
mWebView.loadUrl("javascript:test()");
} else {
mWebView.evaluateJavascript("javascript:test()", null);
}
js调用android代码
js调用android代码方法大致有三种，下面分别进行介绍。
使用addJavascriptInterface注释
这种方式就相当于将android方法映射给js，使得js可以直接调用android代码
示例代码如下：
在Android中需要给方法添加addJavascriptInterface注释来进行映射。
参考代码如下：
mWebView = findViewById(R.id.webView);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true); // 设置允许js交互
mWebView.addJavascriptInterface(new IJavaScriptInterface(), "api"); // 将对象映射到js方法中去
mWebView.loadUrl("file:///android_asset/test.html");
private class IJavaScriptInterface {
// 注意这个注释
@JavascriptInterface
public void testCalledByJs(String msg) {
Log.d(TAG, "testCalledByJs: "+msg);
}
}
对应的js调用就比较简单了，就是映射过来的对象+. + 映射的方法。上栗中我们的对象是api，方法是testCalledByJs,所有调用就应该是api.testCalledByJs("test1");
参考如下：
function testCallAndroid1(){
console.log("test1");
api.testCalledByJs("test1");
}
注意，这种方法在4.2版本以下时有严重的漏洞，在4.2以下的版本不应该使用这种方式。
URL拦截
这种方式就是通过在android端拦截js的url跳转，如果判断时指定的url就执行对应的android代码指令。
在androi端，通过WebViewClient的shouldOverrideUrlLoading获取到js的跳转指令，通过解析url，判断是我们需要解析的指令，就指定对应的方法，并返回true。
例如我们在android端可以这么写：
mWebView = findViewById(R.id.webView);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true); // 设置允许js交互
mWebView.loadUrl("file:///android_asset/test.html");
mWebView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String s) {
if(s.equals("control:cancel")) {
onCancel();// 对应的android方法。这里就不进行实现了
return true;
}
return super.shouldOverrideUrlLoading(webView, s);
}
});
在js里面的调用也特别简单，代码如下：
function testCancel() {
document.location = "control:cancel";
}
当然，我们完全可以在url里传一些指定的参数，来进行参数传递，我们只需要在shouldOverrideUrlLoading中解析中来即可。
方法拦截
与URL方法来接类似，我们可以通过拦截js中的一些方法来实现js调用android的方法。
我们常用的拦截js的方法主要包括： alert()（弹出警告框，没有返回值）,confirm()（弹出确认框，有两个返回值）,prompt()（弹出输入框，任意设置返回值）。我们在android端通过实现WebChromeClient中的onJsAlert()、onJsConfirm()、onJsPrompt（）来拦截上述的三个方法。
常见的拦截都是拦截prompt方法，因为只有prompt可以返回任意类型的数据，操作更加全面、也更加灵活。
下面就以拦截js的prompt方法为例，实现js调用android端的方法。
在android端实现如下：
我们把拦截的方法单独成类，譬如我们可以这么写：
class hijackWebChromeClient extends WebChromeClient {
String TAG = "tag";
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
// 根据协议的参数，判断是否是所需要的url(原理同方式2)
// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
//假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）
Uri uri = Uri.parse(message);
// 如果url的协议 = 预先约定的 js 协议
// 就解析往下解析参数
if (uri.getScheme().equals("js")) {
// 如果 authority = 预先约定协议里的 webview，即代表都符合约定的协议
// 所以拦截url,下面JS开始调用Android需要的方法
if (uri.getAuthority().equals("demo")) {
// 执行JS所需要调用的逻辑
Log.d(TAG,"js调用了Android的方法");
// 可以在协议上带有参数并传递到Android上
HashMap params = new HashMap<>();
Set collection = uri.getQueryParameterNames();
//参数result:代表消息框的返回值(输入值)
result.confirm("js调用了Android的方法成功啦");
}
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}
// 拦截JS的警告框
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
// 拦截JS的确认框
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
return super.onJsConfirm(view, url, message, result);
}
}
在拦截js的方法的实现类中，我们仅实现了一个onJsPrompt，用于实现拦截js的prompt方法，其他的可以自行实现。实现了对方法的拦截，我们将其设置给目标webView即可。
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true); // 设置允许js交互
settings.setJavaScriptCanOpenWindowsAutomatically(true); //允许js弹窗
mWebView.loadUrl("file:///android_asset/test.html");
mWebView.setWebChromeClient(new hijackWebChromeClient());
在js中的调用相对来说就简单了，参考下面的调用就好了。
function testCallAndroid3(){
console.log("test3");
// 调用prompt（）
var result = prompt("js://demo?arg1=111&arg2=222");
console.log("get data " + result);
}
总结
js调用android方法一共有三种，第一种是直接映射给js进行调用，使用简单，但是在4.2以下的版本中存在重大安全漏洞，第二中是通过android端拦截js的URL来进行实现，但是如果js不好获取其返回值，第三种是通过android端拦截js的方法来进行实现，这种方法比较灵活，基本能满足开发需求，但是需要相关协议进行约束，否者不好管理。
参考链接
- https://75team.com/post/android-webview-and-js.html
- https://blog.csdn.net/carson_ho/article/details/64904691