Android与HTML5的交互主要是两个部分, 与HTML5的交互以及与JavaScript的交互, 与HTML5的交互可以通过注册onclick事件转化为与JavaScript的交互
Android与JavaScript的交互主要是通过相互调用方法实现的, Android对JavaScript的可以称之为调用, 但是JavaScript对于Android代码的调用则是通过拦截(@JavascriptInterface与映射实现存在较多漏洞, 也不推荐使用)
Android调用JavaScript代码有两种方式, 通过WebView对象的loadUrl(String)或evaluateJavascript(String, ValueCallback
// audioPrepareResult是当前页面中的一个JavaScript方法
// startRecordResult是Android本地方法返回的结果, 作为参数传递给JavaScript方法
mWebView.evaluateJavascript("javascript:audioPrepareResult(\"" + startRecordResult + "\")", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// nothing
}
});
这里有一个坑, 如果JavaScript方法的参数是一个字符串的话, 一定要在参数前后手动加上"(引号), 否则JavaScript会产生undefined, 比较奇葩的是, 如果参数是一段JSON, 所以就有了"{ \"longitude\": 0, \"latitude\": 0}"这种代码
JavaScript调用Android方法有三种, 第一种是通过WebView的addJavascriptInterface(Object, String)进行映射, 这个方法虽然很方便, 但是存在严重漏洞, 不推荐使用. 第二种方法是通过拦截shouldOverrideUrlLoading(WebView, String)进行URL拦截, 与约定匹配就进行对应的方法调用. 第三种是通过重写WebChromeClient里的onJsAlert(WebView view, String url, String message, String defaultValue, JsPromptResult result), onJsConfirm(/* 参数同onJsAlert/), onJsPrompt(/ 参数同onJsAlert*/)进行拦截对应的对话框, 匹配参数3的message, 与约定匹配就执行对应的Android代码, 下面给出第三种代码的demo:
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
Uri uri = Uri.parse(message);
if (uri.getScheme().equals("CallAndroidMethod")) {
switch (uri.getAuthority()) {
case "recordAudio":
boolean recordAudioResult = MainActivity.this.recordAudio();
result.confirm(new Boolean(recordAudioResult).toString());
return true;
default:
break;
}
}
result.confirm(new Boolean(true).toString());
return super.onJsPrompt(view, url, message, defaultValue, result);
}
});
调用这段代码对应的 H5 代码为:
<html>
<head>
<meta charset="UTF-8" />
<title>Android With H5 Demo</title>
<script>
function uploadImage() {
var result = prompt("CallAndroidMethod://recordAudio?type=search");
}
</script>
</head>
<body>
<button type="button" id="recordAudioButton" onclick="recordAudio()">Record Audio</button>
</body>
</html>
这里有个坑, 在onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)方法返回前一定要调用最后一个参数JsPromptResult的confirm(bool)方法, 否则会造成HTML5页面无响应
其他一些操作:
WebView的canGoBack()与goBack()方法配合Activity的onKeyDown(int keyCode, KeyEvent event)可以实现用户按返回键是返回上一个Web页面而非退出页面