Android与JS交互
2017-07-25 本文已影响3148人
辩护人
现在越来越多的App是混合开发，很需要原生与网页交互，下面介绍如何交互以及有可能出现的坑。
Java调用JS方法
对于Android调用JS方法的方式有2种：
- 通过
WebView的loadUrl（） - 通过
WebView的evaluateJavascript（）
方式一：loadUrl（）
- 第一步：设置与Js交互的权限
WebSettings webSettings = mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
- 第二步：设置加载网页
mWebview.loadUrl("加载的网页");
- 第三步：调用JS方法
通过使用mWebview.loadUrl 调用“javascript:" + 方法
如果JS这样定义的
<script>
function callJS(){
alert("Android调用了JS的无参callJS方法");
}
function callJSParameter(message){
alert("Android调用JS的有参callJS方法，参数为"+message);
}
</script>
在Java代码中
//调用无参
mWebView.loadUrl("javascript:callJS()");
//调用有参
mWebView.loadUrl("javascript:callJSParameter('测试')");
方式一注意事项（也就是坑）
- 调用JS方法时一定要在
onPageFinished（）回调之后才能调用，否则不会调用。
onPageFinished()属于WebViewClient类的方法，主要在页面加载结束时调用
- 调用JS方法时一定要在主线程，否则会崩溃异常。
java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'Thread-18022'. All WebView methods must be called on the same thread.
如果非要在子线程调用，也要将其转换到主线程中去：
mWebView.post(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript:callJS()");
}
});
- 调用的带参数的JS方法时，参数类型如果为String ，切记使用单引号( ') 包裹；如果为数组类型则不用，如：javascript:callJs([01, 02, 03])；如果为其他复杂类型则可以转换为 Json 字符串的形式传递。
方式二：evaluateJavascript（）
*执行该方法不会使页面刷新，而第一种方法（loadUrl ）的执行则会，但是Android 4.4 后才可使用，兼容性要求偏高。
JS代码
function callJSReturn(message){
return message;
}
Java代码
mWebView.evaluateJavascript("javascript:callJSReturn('方式二调用JS')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
}
});
两种方式对比
| 调用方式 | 优点 | 缺点 | 使用场景 |
|---|---|---|---|
loadUrl（） |
兼容性好 | 获取返回值麻烦 | 不需要获取返回值 |
evaluateJavascript（） |
只能从4.4（18）以上使用 | 获取返回值简单 | 4.4（18）以上 |
JS调用Java
JS调用Java的方式有三种
- 通过
WebView的addJavascriptInterface（） - 通过
WebViewClient的shouldOverrideUrlLoading（）方法回调拦截url - 通过
WebChromeClient的onJsAlert（）、onJsConfirm（）、onJsPrompt（）方法回调拦截JS对话框alert（）、confirm（）、prompt（）消息
方式一：addJavascriptInterface（）
JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LYJ</title>
<script>
function testCallAndroid(){
test.callAndroid("JS调用了Android方法");
}
</script>
</head>
<body>
<button type="button" id="button1" onclick="testCallAndroid()">点击按钮通过方式一调用Android方法</button>
</body>
</html>
- 第一步：定义一个JS调用的方法
@JavascriptInterface
public void callAndroid(String message){
Toast.makeText(CallAndroidActivity.this,message,Toast.LENGTH_SHORT).show();
}
1.必须要有@JavascriptInterface，在 Android4.2（17） 及更高版本的系统中，任何暴露给 Js 访问的 Java 接口都需要添加这个注解，否则会报异常：Uncaught TypeError: Object [object Object] has no method ‘XXX’。系统在之前的版本中有漏洞，Js 可以通过反射的方式访问注入 WebView 中的 Java 对象的 public 类型 field 和 method，从而随意修改宿主程序，所以为了安全增加了这个注解。想更深入的了解参考这篇文章你不知道的 Android WebView 使用漏洞
2.方法名切记要和JS调用的方法名一样
- 第二步将Java对象映射到JS对象
mWebView.addJavascriptInterface(this, "test");
第一个参数是写有JS调用方法的Android对象，第二个参数是JS调用的对象名，切记跟网页上的一致。
方式一注意事项
- Js 调用 Java 方法时，不是在主线程 (Thread Name：main) 中运行的，而是在一个名为 JavaBridge 的线程中执行的，如果需要 Java 继续回调 Js，千万别在 JavascriptInterface 方法体中直接执行 loadUrl() 方法，而是像前面一样进行线程切换操作。
方式二：WebViewClient 的shouldOverrideUrlLoading（）方法
JS代码
<script>
function testTwoCallAndroid(){
document.location = "js://webview?key1=value1&key2=value2";
}
</script>
<body>
<button type="button" id="button2" onclick="testTwoCallAndroid()">点击按钮通过方式二调用Android方法</button>
</body>
Java代码
// 复写WebViewClient类的shouldOverrideUrlLoading方法
mWebView.setWebViewClient(
new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 第一步：根据协议的参数，判断是否是所需要的url
// 一般根据scheme（协议格式） & authority（协议名）判断
//假定传入进来的 url = "js://webview?key1=value1&key2=value2"（同时也是约定好的需要拦截的）
Uri uri = Uri.parse(url);
// 第二步：如果url的协议 = 预先约定的 js 协议，就解析往下解析参数
if (uri.getScheme().equals("js")) {
//第三步：再判断，如果 authority = 预先约定协议里的 webview，即代表都符合约定的协议
// 所以拦截url,下面JS开始调用Android需要的方法
if (uri.getAuthority().equals("webview")) {
// 第四步：
// 执行JS所需要调用的逻辑
// 获取协议执行的参数
HashMap<String, String> params = new HashMap<>();
Set<String> collection = uri.getQueryParameterNames();
for (String key : collection){
String value = uri.getQueryParameter(key);
Log.d("==","key = " + key + ",value = " + value);
params.put(key,value);
}
}
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
);
}
注释比较清楚，就按注释的步骤走。
shouldOverrideUrlLoading(WebView view, String url)在Android 7.0（24）过时，官方改为shouldOverrideUrlLoading (WebView view,
WebResourceRequest request)。然后获取Uri改为Uri uri = request.getUrl();。
方式三：通过WebChromeClient的onJsAlert（）、onJsConfirm（）、onJsPrompt（）方法回调拦截JS对话框alert（）、confirm（）、prompt（）消息
| 方法 | 作用 | 返回值 | 备注 |
|---|---|---|---|
| alert() | 弹出警告框 | 没有 | 在文本加入/n可换行 |
| confirm() | 弹出确认框 | 两个 | 返回boolean值,true代表确认，false代表取消 |
| prompt() | 弹出输入框 | 任意 | 点击确认返回输入框的值，点击取消返回null |
下面的例子将用拦截 JS的输入框（即prompt（）方法）说明，其他两种与其类似 ：
JS代码
<script>
function testPromptCallAndroid(){
var result=prompt("js://prompt?key1=value1&key2=value2");
alert("方式三 " + result);
}
</script>
<body>
<button type="button" id="button3" onclick="testPromptCallAndroid()">点击按钮通过方式三调用Android方法</button>
</body>
Java代码
mWebView.setWebChromeClient(
new WebChromeClient() {
// 拦截输入框(原理同方式2)
// 参数message:代表promt（）的内容（不是url）
// 参数result:代表输入框的返回值
@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("prompt")) {
// 执行JS所需要调用的逻辑
// 可以在协议上带有参数并传递到Android上
HashMap<String, String> params = new HashMap<>();
Set<String> collection = uri.getQueryParameterNames();
for (String key : collection) {
String value = uri.getQueryParameter(key);
Log.d("==", "key = " + key + ",value = " + value);
params.put(key, value);
}
//参数result:代表消息框的返回值(输入值)
result.confirm("js通过方式三调用了Android的方法成功");
}
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}
}
);
整体上跟上一个方式相差不多。
其他
- 如果需要回调这种需求，你只要android的异步回调中，使用loadUrl调用js的相关方法。
- 如果需要给JS返回值，除了方式三以外，还可以这么做
JS代码
function returnResult(result){
alert("result is" + result);
}
Java代码
mWebView.loadUrl("javascript:returnResult(" + result + ")");
参考文章
Android：你要的WebView与 JS 交互方式 都在这里了
Android WebView —— Java 与 JavaScript 交互总结
Android_其他语言交互篇——Js、C#、C、C++
